Adding a drop down inside bootstrap buttons row with ruby code output

Question

On my Rails app I have a row of buttons, I want to make one of them into a drop down menu that will present items extracted from a db table, the ruby code works but I can't get it to appear as a drop down.

Here is the ruby code:

<% @all_makes.each do |allMakesDisplay| %>
  <a id="allMakesDisplay"><%= link_to allMakesDisplay.name, make_index_path(make_name: allMakesDisplay.name) %></a>
<% end %>

And this is the row with the drop down:

<div class="collapse navbar-collapse top-bar" id="bs-example-navbar-collapse-1">
  <div class="row">
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="/">Home</a>
      </button>
    </div>
    <div class="col-md-3">
      <div class="dropdown">
        <button class="btn btn-lg btn-secondary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
          <a href="/dealership/category/make">Makes</a>
          <span class="caret"></span>
        </button>
        <% @all_makes.each do |allMakesDisplay| %>
          <ul class="dropdown-menu">
            <li>
              <a href="<%= link_to allMakesDisplay.name, dealership_category_make_path(allMakesDisplay) %>"></a>
            </li>
          </ul>
          <% end %>
      </div>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="blog.html">Models</a>
      </button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="contact.html">My Portfolio</a>
      </button>
    </div>
  </div>
</div>

The MAKES should be the drop down, the are 12 items that should be returned.

Thanks

Answer 1

There are a few things going on:

• The #each loop should be inside <ul>.
• link_to will create an anchor tag <a>, so it should not be used as a href attribute. link_to

<div class="collapse navbar-collapse top-bar" id="bs-example-navbar-collapse-1">
  <div class="row">
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="/">Home</a>
      </button>
    </div>
    <div class="col-md-3">
      <div class="dropdown">
        <button class="btn btn-lg btn-secondary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
          <a href="/dealership/category/make">Makes</a>
          <span class="caret"></span>
        </button>
        
          <ul class="dropdown-menu">
            <!--for each element, create a <li> (not <ul>)-->
            <% @all_makes.each do |allMakesDisplay| %>
            <li>
              <%= link_to allMakesDisplay.name, 
                          dealership_category_make_path(allMakesDisplay) %>
            </li>
           <% end %> <!-- end #each loop-->
          </ul>
          
      </div>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="blog.html">Models</a>
      </button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="contact.html">My Portfolio</a>
      </button>
    </div>
  </div>
</div>