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
Post a Comment