Ad

Polymer IronResizableBehavior Iron-resize Event Not Fired When "resizable" Element Is Hidden/un-hidden As Described In Docs

- 1 answer

Below is the Polymer IronResizableBehavior demo modified to fire based on the "resizable" element being hidden or un-hidden rather than just on the window being resized. The event is fired when the window is resized, but the Polymer docs (https://elements.polymer-project.org/elements/iron-resizable-behavior) indicate:

This event will be fired when they become showing after having been hidden, when they are resized explicitly by another resizable, or when the window has been resized.

So, I would expect the event to also be fired when I hide/un-hide the "x-puck" element below. What am I doing wrong?

<link rel="import" target="_blank" rel="nofollow noreferrer" href="../../iron-resizable-behavior.html">
<link rel="import" target="_blank" rel="nofollow noreferrer" href="../../../paper-button/paper-button.html">

<dom-module id="x-puck">
  <style>
  </style>

  <template>

    <b>I'm an un-hidden element!</b>

  </template>

</dom-module>

<script>
  Polymer({

    is: 'x-puck',

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    listeners: {
      'iron-resize': '_onIronResize'
    },

    attached: function() {
      this.async(this.notifyResize, 1);
    },

    _onIronResize: function() {
      alert('x-puck _onIronResize called!');
    }
  });
</script>


<dom-module id="x-app">
  <style>
  </style>

  <template>
    <paper-button on-tap="showElement">Show</paper-button>
    <paper-button on-tap="hideElement">Hide</paper-button>

    <x-puck id="xPuck" hidden$="{{hide}}"></x-puck>
  </template>

</dom-module>

<script>
  Polymer({

    is: 'x-app',

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    properties: {
      hide: {
        type: Boolean,
        value: true
      }
    },

    showElement: function() {
      this.hide = false;
    },

    hideElement: function() {
      this.hide = true;
    }
  });
</script>
Ad

Answer

I looked fastly at the source code of IronResizableBehavior and didn't see anything that would support that an element implementing it will be resized whenever its CCS display property is changed (it's essentially what the hidden attribute does).

Looking at the iron-pages element, you can see that it explicitely calls notifyResize whenever an element is unhidden, so I supposed this is the way it works.

I would suggest you to open an issue on the Github repo in order to get more feedback on this, and to correct this misleading statement if I'm right.

Ad
source: stackoverflow.com
Ad