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

StackOverflow https://stackoverflow.com/questions/16379632

  •  14-04-2022
  •  | 
  •  

Pregunta

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>
¿Fue útil?

Solución

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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top