CODEWITHSUNDEEP
javascripthtmlcssdompolymer
majo
majo

Reputation: 55

Resizable elements in polymer

I tried to make a component for resizable cards using paper-dialog, and I tried to use the css property "resize:both;" but I couldnt find a way to update interior elements and components when their container (paper-dialog) increases in size. Is there a way to capture the resize event on an element? When I do, what should i call/do to trigger the css update?

Thanks!

Upvotes: 0

Views: 4127

Answers (2)

01es
01es

Reputation: 5410

With Polymer 1.x there is a corresponding behaviour for handling element resizing -- Polymer.IronResizableBehavior. Here is a good example that demonstrates how it can be used.

Upvotes: 3

ebidel
ebidel

Reputation: 24109

Elements don't have a resize event. This is something that's missing from the web platform. On window can have a resize event.

One thing you can do is use mouse events to fake it and know when the user has done the resize. mouseup is the hook to know when the resize is done:

<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="my-element" on-mouseup="{{resizeDone}}">
  <template>
    <style>
      :host {
        display: block;
        background: red;
        width: 150px;
        height: 150px;
        resize:both;
        overflow: auto;
      }
    </style>
    width: <span>{{width}}</span>
    height: <span>{{height}}</span>
  </template>
  <script>
    Polymer({
      attached: function() {
        this.resizeDone(null, null, this);
      },
      resizeDone: function(e, detail, sender) {
        this.width = sender.clientWidth;
        this.height = sender.clientHeight;
      }
    });
  </script>
</polymer-element>

<my-element></my-element>

Upvotes: 1

Related Questions