3

I have an iron-list with a simple <div> inside. When the iron-list iterates over the array of data I want each instance of <div> to be styled with respect to the top of the main iron-list but no matter what I try (combinations of absolute and relative styles) I can't seem to get it to work. I would appreciate if anyone can help me achieve this. Below is the related code: 

<app-header-layout has-scrolling-region style="top: 10px; left:0px; float:left; width: 99%; min-height: 535px; background-color: #999;">

  <iron-list id="myList" items="[[data]" as="myItem" selection-enabled multi-selection>
    <template>      

    <div id="divID" style$="background-color:#FFF; height:[[myItem.height]]px; top:[[myItem.top]]px; border-radius: 3px; border-color:#333; border-width:1px; border-style: solid;"></div>

    </template>
  </iron-list>
</app-header-layout>

When a child size changes, that only child repositions correctly with respect to the top of iron-list but if I refresh the page the reference seems to change to the last child above it rather than the top.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
TheBen
  • 3,410
  • 3
  • 26
  • 51
  • I have something that seems to work but is sort of a hack and not really a good solution. Basically I'm adding a
    's at the top with the style having position: absolute and with height of 1px, then every child sees that absolute and align with that. But if I understand correctly I'm creating that guid
    with every repetition so I have multiple guide
    on top of each other?! problem is that then the items don't seem to disappear even when I make the input data null.
     – TheBen Nov 17 '16 at 08:04
  • I used dom-repeat and things start working, I think this is not a good place for using iron-list. It seems like iron list is best for what it says, a simple list! lol – TheBen Nov 17 '16 at 17:27

0 Answers0