Combining an `<iron-list>` with a `<paper-scroll-header-panel>`

Question

The <iron-list> ( docs ) requires a fixed height, yet on the other hand <paper-scroll-header-panel> ( docs , demo ) expects the <div> to have more height than is available, thus allowing you to collapse the header whilst scrolling. How can one combine these two elements in such a way that the iron list recalculates properly (manually resize it and trigger the resize event? :S ) whilst the header becomes smaller?

Answer 1

Consider this layout below. As long as the iron-list 's parent - paper-scroll-header-panel has a fit selector, it should just work without doing anything extra.

<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
  <paper-toolbar class="tall">
  </paper-toolbar>
  <iron-list items="[[data]]">

This is because -

iron-list must ether be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (eg the flex or fit classes).

You can read this from the official document and also check out this live demo with these two working together.