Search code examples
ruby-on-railsbootstrap-sass

why is my bootstrap view for my rails app acting funny?


I'm using the bootstrap-sass gem and for some reason in the navbar I'm using the active class for one of the li's below, however it doesn't appear pressed down.

application.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title><%= yield(:title) %></title>

  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body id="<%= params[:controller].parameterize %>_controller">

<div class="container">

    <div class="row">
        <div class="span12">
            <div class="navbar">
              <div class="navbar-inner">
                <%= link_to 'evoALL', root_path, 
                html_options = {:class => 'brand'} %>

                <% navArr = ["Dashboard", "Help People", 
                    "Get Help", "Contact Us"] %>

                <% flash.each do |key, value| %>
                    <p class="lead"><%= value %></p>
                <% end %>

                <ul class="nav">
                    <% navArr.each do |value| %>
                        <li>

                                <a 
                                <% if (yield(:navActive)==value) %>
                                    class="active"
                                <% end %>
                                href="#">
                                    <%=value%>
                                </a>

                        </li>
                    <% end %>
                </ul>
              </div>
            </div>
        </div>
    </div>


    <%= yield %>

<div class="container"> 
    <div id="footer"><!-- footer start -->
        <div class="row-fluid">
            <div class="span12">
                <p class="pull-right">
                    &#169; <%= Date.today.year %>
                </p>
            </div>
        </div>
    </div><!-- footer end -->
</div> 

</div> <!-- close container div -->

</body>
</html>

index.html.erb for the view file of the index method of the main controller that gets routed to for the root of the application:

<%= provide(:title, 'evoALL') %>
<%= provide(:navActive, 'Get Help') %>
<div class="container">
  <div class="row">
    <div class="span12">
      <p>Needs Home Page</p>
    </div>
  </div>
</div>

Solution

  • I was applying the active class to the a tag instead of the li tag.

    The correct solution would be to replace this:

    <% navArr.each do |value| %>
    
        <ul>  
        <li>
        <a 
        <% if (yield(:navActive)==value) %>
            class="active"
        <% end %>
        href="#">
            <%=value%>
        </a>
    
      </li>
    
      </ul>
    
    <% end %>
    

    with this:

    <ul class="nav">
        <% navArr.each do |value| %>
    
    
            <li 
                <% if (yield(:navActive)==value) %>
                    class="active"
                <% end %>>
                <a  href="#">
                    <%=value%>
                </a>
            </li>
    
      <% end %>
    </ul>