Simply not working in 2.0

[iSuslov]

Polymer.IronResizableBehavior not working. No documentation. App crashes when use it like this:
Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)

iron-resizable-behavior.html:86 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at HTMLElement.notifyResize (iron-resizable-behavior.html:86)
    at HTMLElement._notifyDescendant (iron-resizable-behavior.html:180)
    at HTMLElement._onIronRequestResizeNotifications (iron-resizable-behavior.html:160)
    at HTMLElement.handler (template-stamp.html:92)
    at HTMLElement.fire (legacy-element-mixin.html:338)
    at HTMLElement._requestResizeNotifications (iron-resizable-behavior.html:201)
    at HTMLDocument.readystatechanged (iron-resizable-behavior.html:198)
notifyResize @ iron-resizable-behavior.html:86
_notifyDescendant @ iron-resizable-behavior.html:180
_onIronRequestResizeNotifications @ iron-resizable-behavior.html:160
handler @ template-stamp.html:92
fire @ legacy-element-mixin.html:338
_requestResizeNotifications @ iron-resizable-behavior.html:201
readystatechanged @ iron-resizable-behavior.html:198
iron-resizable-behavior.html:86 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at HTMLElement.notifyResize (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:86:33)
    at HTMLElement._notifyDescendant (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:180:18)
    at HTMLElement.<anonymous> (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:84:16)
    at Array.forEach (native)
    at HTMLElement._notifyDescendantResize (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:82:34)
    at HTMLElement.resetLayout (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:65:12)
    at HTMLElement._appResetLayoutHandler (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:35:12)
    at HTMLElement.handler (http://127.0.0.1:8001/components/polymer/lib/mixins/template-stamp.html:92:28)
    at HTMLElement.fire (http://127.0.0.1:8001/components/polymer/lib/legacy/legacy-element-mixin.html:338:14)
    at http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:74:14
notifyResize @ iron-resizable-behavior.html:86
_notifyDescendant @ iron-resizable-behavior.html:180
(anonymous) @ app-layout-behavior.html:84
_notifyDescendantResize @ app-layout-behavior.html:82
resetLayout @ app-layout-behavior.html:65
_appResetLayoutHandler @ app-layout-behavior.html:35
handler @ template-stamp.html:92
fire @ legacy-element-mixin.html:338
(anonymous) @ app-layout-behavior.html:74
iron-resizable-behavior.html:86 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at HTMLElement.notifyResize (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:86:33)
    at HTMLElement._notifyDescendant (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:180:18)
    at HTMLElement.<anonymous> (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:88:16)
    at Array.forEach (native)
    at HTMLElement.notifyResize (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:86:34)
    at HTMLElement._notifyDescendant (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:180:18)
    at HTMLElement.<anonymous> (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:84:16)
    at Array.forEach (native)
    at HTMLElement._notifyDescendantResize (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:82:34)
    at HTMLElement.resetLayout (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:65:12)
notifyResize @ iron-resizable-behavior.html:86
_notifyDescendant @ iron-resizable-behavior.html:180
(anonymous) @ iron-resizable-behavior.html:88
notifyResize @ iron-resizable-behavior.html:86
_notifyDescendant @ iron-resizable-behavior.html:180
(anonymous) @ app-layout-behavior.html:84
_notifyDescendantResize @ app-layout-behavior.html:82
resetLayout @ app-layout-behavior.html:65
_appResetLayoutHandler @ app-layout-behavior.html:35
handler @ template-stamp.html:92
fire @ legacy-element-mixin.html:338
(anonymous) @ app-layout-behavior.html:74
iron-resizable-behavior.html:86 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at HTMLElement.notifyResize (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:86:33)
    at HTMLElement._notifyDescendant (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:180:18)
    at HTMLElement.<anonymous> (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:84:16)
    at Array.forEach (native)
    at HTMLElement._notifyDescendantResize (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:82:34)
    at HTMLElement.resetLayout (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:65:12)
    at HTMLElement._appResetLayoutHandler (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:35:12)
    at HTMLElement.handler (http://127.0.0.1:8001/components/polymer/lib/mixins/template-stamp.html:92:28)
    at HTMLElement.fire (http://127.0.0.1:8001/components/polymer/lib/legacy/legacy-element-mixin.html:338:14)
    at http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:74:14
notifyResize @ iron-resizable-behavior.html:86
_notifyDescendant @ iron-resizable-behavior.html:180
(anonymous) @ app-layout-behavior.html:84
_notifyDescendantResize @ app-layout-behavior.html:82
resetLayout @ app-layout-behavior.html:65
_appResetLayoutHandler @ app-layout-behavior.html:35
handler @ template-stamp.html:92
fire @ legacy-element-mixin.html:338
(anonymous) @ app-layout-behavior.html:74
iron-resizable-behavior.html:86 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at HTMLElement.notifyResize (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:86:33)
    at HTMLElement._notifyDescendant (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:180:18)
    at HTMLElement.<anonymous> (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:88:16)
    at Array.forEach (native)
    at HTMLElement.notifyResize (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:86:34)
    at HTMLElement._notifyDescendant (http://127.0.0.1:8001/components/iron-resizable-behavior/iron-resizable-behavior.html:180:18)
    at HTMLElement.<anonymous> (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:84:16)
    at Array.forEach (native)
    at HTMLElement._notifyDescendantResize (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:82:34)
    at HTMLElement.resetLayout (http://127.0.0.1:8001/components/app-layout/app-layout-behavior/app-layout-behavior.html:65:12)

[ralphsmith80]

@iSuslov I was able to get this working in 2.0, but I could not get the class mixin functionality to work which lead me here. I have no experience with Polymer 1.0 so it took a bit of digging and trial to find that 1.0 syntax works. In any case here's an element that wraps google-chart to make it responsive.

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../bower_components/google-chart/google-chart.html">
<link rel="import" href="shared-styles.html">

<dom-module id="google-chart-responsive">
  <template>
    <style include="shared-styles">
      #googleChart {
        height: 500px;
        width: 100%;
      }
    </style>
    <google-chart
      type='area'
      id='googleChart'
      options='{"title": "Distribution of days in 2001Q1"}'
      data="[[data]]">
    </google-chart>
  </template>

  <script>
    let tm = null
    Polymer({
      is: 'google-chart-responsive',
      behaviors: [
        Polymer.IronResizableBehavior
      ],
      properties: {
        data: {
          type: Array,
          value: [],
        },
      },
      listeners: {
        'iron-resize': '_onIronResize'
      },
      attached: function() {
        this.async(this.notifyResize, 1);
      },
      get parent() {
        if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
          return this.parentNode.host;
        }
        return this.parentNode;
      },
      _onIronResize: function() {
        if (tm) { return }
        tm = setTimeout(() => {
          this.$.googleChart.redraw()
          clearTimeout(tm)
          tm = null
        }, 50)
      }
    });
  </script>
</dom-module>

[iSuslov]

@ralphsmith80 yep, in hybrid mode it will work, but in 2.0 mode it's not

[esd100]

Definitely need new documentation to explain how to use this properly in 2.0 with mixins

[BootsSiR]

@iSuslov @esd100

https://meowni.ca/posts/polymer-2-cheatsheet/

I refer to her cheat sheet often and I found her section on mixins more useful than the docs :)

[yebrahim]

If someone got this to work in 2.0, can you share your changes?

[BootsSiR]

@yebrahim I am using it like so in my 2.0 elements

class MyElement extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
      static get is() { return 'my-element'; }

    }

[yebrahim]

@BootsSiR Are you then adding a listeners property with iron-resize event handler? Doing so didn't trigger the event for me.

[BootsSiR]

@yebrahim Sorry, my particular implementation involves manually calling notifyResize

[galanovnick]

@yebrahim mb its a bit too late for this answer, but still. In the Polymer 2.0 there are no more listeners property (see https://www.polymer-project.org/2.0/docs/upgrade#removed-apis). Now you have to add listeners manually in connectedCallback:

class MyElement extends Polymer.mixinBehaviors(Polymer.IronResizableBahavior, Polymer.Element) {
  ...
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('iron-resize', e => console.log('handled!'));
  }
}

[SirJackovich]

I was able to get it to work with Polymer 2.0
I added this to my bower.json:
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.1.0”

Then I added the import at the top of my component file:
<link rel="import" href="/components/iron-resizable-behavior/iron-resizable-behavior.html">

Then in my class declaration I added the behavior:
class MyElement extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.MutableData(Polymer.Element)) {

I added the ready function with an event listener that called a function when the event was fired:
ready() { super.ready(); this.addEventListener("iron-resize", this._resizeAware); }

I defined my function to log the width every time the function was fired:
_resizeAware() { console.log("Width is now: " + this.offsetWidth); }

[onlinerahul]

Please suggest if iron-grid is a good for grid system to make responsive app ? https://github.com/The5heepDev/iron-grid