<div> Position base on Collection


#1

Guys,

I am planning to show random Boxes ( >500 pcs) on my page and position them based on my position Collection.

 {{#each}}
    <div class="element">{{label}}</div>
 {{/each}}

My Collection looks like this

   {
     label: 100,
     top: 70px,
     left: 10px
    }
    {
     label: 75,
     top: 200px,
     left: 623px
    }

I can position them exactly using CSS but I have to write > 500 CSS Class like below

 .element:nth-of-type(100) {
          position: absolute;
         left: 10px;
          top: 70px;
    }

There should be a better solution than this. Thanks.


#2

Why don’t you provide the position in the style of the DIV?


#3

@jamgold I did it the first time but was not working and thought it will not work that way or something is in conflict with my DIV style. So I decided to delete some of the CSS and start from scratch like you said and it’s working now.

 {{#each greenLabel}}
      <div class="element" style="position: absolute; left: {{left}}px;top: {{top}}px;">{{label}}</div>
  {{/each}}