Iron-list row vertical responsiveness breaks

Question

Using Polymer 1.* with iron list. I am having a issue with the rows of iron-list being responsive vertically.

For instance, in the below example when the text collapses in the first row the row line above Charlie Brown overlaps Charlie Brown row/text.

I see that each row is position: absolute by iron-list, so not sure if there is anything I can do about this.

Any suggestions?

Answer 1

I had this issue some times ago (well not exactly the same, but it look like this is the same root cause) and the solution I found was to force the element to re-render when the window was resized.

Polymer is fixing some absolute position values at render, and some elements break when viewport is changed without triggering a re-render.

I you need it, i will try to find the exact code snippet, but just listen for resize, and call this.render on the iron list should do.