1

I have an iron-list with bunch of objects that I'd like them to reposition upon occurring an event that changes that input data to the iron-list. I need each object to reference to the top of the list and have not found any solution for that yet. The only way I can get them to act like absolute objects is to put a div before the main item as you see below. But then when I change the data the number of items stay the same and only some (as many as new elements in my array) reposition. If there are more items left from previous data, they stay where they are even though I am binding the heights to be read from the data. 

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

         <!-- I have to have this to get the main items to position referenced to the top of the iron-list -->
        <div id="referenceDiv" style="left:0px; float:left; width: 100%; min-height:1px; background-color:blue; top: 0px; display: none;"></div>

        <div id="mainItemID" 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>


       <div id="bottomGuidID" style="left:0px; float:left; width: 100%; min-height:1px; background-color:lightblue; top: 1920px;"></div>

        </template>
      </iron-list>
TheBen
  • 3,410
  • 3
  • 26
  • 51
  • You have a `$` sign on the third `div` after `style`, unless that is intentional (but I'm assuming not because none of the other ones do). – kzhao14 Nov 17 '16 at 16:18
  • oh, I had some computed param that I was binding my height with and I thought $ is needed in that case. Although I have removed that part. Either way, makes no difference though .. I'm thinking of getting back to dom-repeat ! – TheBen Nov 17 '16 at 16:50

0 Answers0