---
title: Resize Event and Notification
order: 4
layout: page
---

[[vaadin-split-layout.sizes]]
= Resize Event and Notification

== [eventname]#iron-resize# Event

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

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

Note that the [eventname]#iron-resize# event is not bubbling.

== Resize Notification for the Nested Elements

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

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

[source,html]
----
<vaadin-split-layout>
  <div>First</div>
  <custom-resizable>Second</custom-resizable>
</vaadin-split-layout>
----

[source,javascript]
----
Polymer({
  is: 'custom-resizable',
  behaviors: [
    Polymer.IronResizableBehavior
  ],
  listeners: {
    'iron-resize': '_onIronResize'
  },
  _onIronResize: function() {
    console.log('Resized');
  }
});
----
