html - Create individual divs with a dynamic ERB Id -


i'm trying make 2 separate divs (called sample-pack-button) erb (each own link inside div), @ moment divs aren't being created separately , there 1 div present containing both links. here code:

<div id="sample-pack-container">   <div id="sample-pack-background">     <% @sample_packs.each |sample_pack| %>       <div class="sample-pack-button" id="sample-pack-<%= sample_pack.name %>">       <%= link_to (sample_pack.name), play_sample_pack_path(sample_pack) %>       <% end %>       </div>   </div> </div> 

so @ moment, have 1 div contain links 'kit1' , 'kit2', whereas there should 2 separate divs link in each.

when inspect element on html, found id="sample-pack-kit2" nested inside id="sample-pack-kit1" i'm thinking shouldn't case:

<div id="sample-pack-container">  <div id="sample-pack-background">   <div class="sample-pack-button" id="sample-pack-kit1">     <a href="/sample_packs/1/play">kit1</a>     <div class="sample-pack-button" id="sample-pack-kit2">       <a href="/sample_packs/2/play">kit2</a>   </div>  </div> </div> 

i'm not sure if structural problem erb or issue css. css is:

#sample-pack-container {   max-width: 913px;   margin-top: 300px;   margin-left: 600px; }  #sample-pack-background {   position: relative; }  .sample-pack-button {   position: absolute;   width: 140px;   height: 140px;   background-color: #8b959e; } 

i've tried moving erb around putting class="sample-pack-button" above .each method , making new p class="a-sample-pack-button' id="sample-pack-<%= sample_pack.name %>" i'm still getting 1 div.

so in summary, i'm trying create 2 unique divs contain link respective sample-pack.

you need move end after closing </div> of sample-pack-button.

<div id="sample-pack-container">   <div id="sample-pack-background">     <% @sample_packs.each |sample_pack| %>       <div class="sample-pack-button" id="sample-pack-<%= sample_pack.name %>">       <%= link_to (sample_pack.name), play_sample_pack_path(sample_pack) %>       </div>     <% end %>   </div> </div> 

Comments

Popular posts from this blog

user interface - How to replace the Python logo in a Tkinter-based Python GUI app? -

objective c - Greedy NSProgressIndicator Allocation -

how to set an OCR language in Google Drive -