resize-aware | Vaadin

Polymer webcomponent that detects and notifies changes to the size of its content

[ This description is mirrored from at on 2019-05-22 ]


Published on Vaadin  Directory Stars on Vaadin Directory

Container element that is aware of, and notifies of, changes to its size.


Sometimes you may need to take some action when the rendered size of an element changes. This element provides the something like the window resize event but for an individual element.

There are many reasons an element's size could change - CSS or class changes, content changes, content of other elements affecting the flow, viewport changes, etc. This element detects the size changes without polling or loops.

This element works in Polymer 2 and Polymer 1 projects. For Polymer 3, see plastic-resize-aware.

This custom control uses code from procurios/ResizeSensor modified to work with Polymer in both Shadow and Shady DOM.


For Polymer 2.0 projects, install the 2.0 native, class based version:

bower install --save resize-aware

For Polymer 1.x projects, install the hybrid version:

bower install --save resize-aware#^1.9.1

For Polymer 3.0 projects, use plastic-resize-aware, and install via:

npm install --save plastic-resize-aware

How to Use

<link rel="import" href="../../bower_components/resize-aware.html" />
<resize-aware on-element-size-changed="handleChange">
    <img src="[[thePic]]">


 any content that could have been in a div
this.$$('resize-aware').addEventListener('element-resize', this.someHandlerName);

Change Notification

You can either include a handler in the markup:

<resize-aware on-element-size-changed="someHandlerName">
  stuff to watch

or listen for the event:

this.$$('resize-aware').addEventListener('element-resize', this.someHandlerName);


MIT license


Link to this version
ImportedReleased 27 October 2018MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (1.0.1)
Browser Compatibility
Install with
bower install --save mlisook/resize-aware"#2.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.1


  • polymer#Polymer/polymer#^2.0.2