how to make polymer iron-list keep expanding, instead of scolling

Question

I am following the example of collapsible items of iron-list . However, I have more content under the iron-list, say an iron-menu.

The issue is that the height of the iron-list does not dynamically increase as the user expand the iron-list contents. Instead the iron-list becomes scollable, making it hard to see all the contents.

I would like the iron-list to expand in height, and push down the content (iron-menu) below. Is there a way to do this? Many thanks.

I also tried to set the scroll-target , but it doesn't push the content below down. It overlaps the iron-list content onto the content below, which is not what I want.

<iron-list scroll-target="document" ... >

Answer 1

The size of the iron-list must be set explicitly, as described on the iron-list project ReadMe under "Sizing iron-list".

So you could use javascript to change the height, based on other conditions.

The other way of putting something 'below' an iron-list is to compute whether you are on the last list item, and add in a custom row (ie pagination) as shown here

But if you don't have a huge dataset, you could use dom-repeat, which will add nodes to the DOM, and therefore you could have your list expand.

Answer 2

I finally find a solution. As you can see from the example , the function getClassForItem() changes the div class to control show/hide. Thus we can trigger the resize event together with it.

    getClassForItem: function(item, selected) {
      this.querySelector('iron-list').fire('iron-resize'); // added line
      return selected ? 'item expanded' : 'item';
    }