You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Resize Event and Notification · Vaadin
Vaadin Elements - Split Layout - Resize Event and Notification

Resize Event and Notification

iron-resize Event

When the user drags the splitter of the vaadin-split-layout element, the element dispatches the iron-resize event. You can subscribe to this event in order to get notified of a split resize.

splitLayout.addEventListener('iron-resize', function() {
  console.log('Resized');
});

Note that the iron-resize event is not bubbling.

Resize Notification for the Nested Elements

The vaadin-split-layout element implements Polymer.IronResizableBehavior. Any nested custom elements that use Polymer.IronResizableBehavior are notified of the split resize, such as iron-dropdown and paper-dialog.

In order to make your own nested custom element notified of a split resize, add the Polymer.IronResizableBehavior to your element and listen to the iron-resize event on it.

<vaadin-split-layout>
  <div>First</div>
  <custom-resizable>Second</custom-resizable>
</vaadin-split-layout>
Polymer({
  is: 'custom-resizable',
  behaviors: [
    Polymer.IronResizableBehavior
  ],
  listeners: {
    'iron-resize': '_onIronResize'
  },
  _onIronResize: function() {
    console.log('Resized');
  }
});