CODEWITHSUNDEEP
htmlcssruby-on-railsruby
randhm
randhm

Reputation: 55

Create individual divs with a dynamic ERB Id

I'm trying to make two separate divs (called sample-pack-button) with my ERB (each with their own link inside the div), but at the moment the divs aren't being created separately and there is only one div present containing both links. Here is my code:

<div id="sample-pack-container">
  <div id="sample-pack-background">
    <% @sample_packs.each do |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 at the moment, I have one div which contain the links 'kit1' and 'kit2', whereas there should be two separate divs with a link in each.

When I inspect element on the html, I found that the id="sample-pack-kit2" is nested inside id="sample-pack-kit1" which I'm thinking shouldn't be the 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 this is a structural problem with my ERB or an issue with my CSS. My 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 my ERB around by putting the class="sample-pack-button" above the .each method and making a new p class="a-sample-pack-button' id="sample-pack-<%= sample_pack.name %>" but I'm still getting just the one div.

So in summary, I'm trying to create two unique divs which contain a link to their respective sample-pack.

Upvotes: 0

Views: 2335

Answers (1)

CWitty
CWitty

Reputation: 4526

You need to move the end after the closing </div> of the sample-pack-button.

<div id="sample-pack-container">
  <div id="sample-pack-background">
    <% @sample_packs.each do |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>

Upvotes: 2

Related Questions