marvin
marvin

Reputation: 479

how to display caret via rails link_to for dropdown in bootstrap

I want to display the little drop down menu symbol in my rails app that uses twitter bootstrap via the link_to method in my rails app.

I can't figure out how to do it. When I add the <b class="caret"></b> (that twitter bootstrap uses) to the 'Setup ' argument below, it gets escaped and shows up as text not html.

<%= link_to 'Setup ', root_path, :id => 'setupdrop', :'data-toggle' => 'dropdown', :class => 'dropdown-toggle' %>

Of all the rails examples that I have seen so far, none use link_to when using this feature of TBS (and include the caret).

Upvotes: 2

Views: 4059

Answers (3)

aaronmgdr
aaronmgdr

Reputation: 608

link_to takes a block so you can do

link_to root_path, :id => 'setupdrop', :'data-toggle' => 'dropdown', :class => 'dropdown-toggle' do
  Setup 
  <b class="caret"></b>
end

Upvotes: 1

lflores
lflores

Reputation: 3800

I remember having an issue with this very thing. If I remember correctly it had to do with the tag order - it had to be inside a <li> tag. Here's my code that works:

<ul class="nav" role="navigation">
  <li class="explore">
    <%= link_to 'explore <b class="caret"></b>'.html_safe, root_path, :id => 'setupdrop', :'data-toggle' => 'dropdown', :class => 'dropdown-toggle' %>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
      <li class="nav-header">Majors</li>
      <li class="dropdown-link"><%= link_to "View All", majors_path %>
      <li class="dropdown-link"><a href="#">By School</a></a></li>
      <li class="dropdown-link"><a href="#">Recently Added</a></a></li>
      <li class="dropdown-link"><a href="#">Most Liked</a></a></li>
    </ul>
  </li>
</ul>

Thanks to Amar I didn't have to play around with converting it into erb as he did it. Here's what my code now looks like with Amar's help.

Upvotes: 1

Amar
Amar

Reputation: 6942

Try this, <%= link_to 'Setup <b class="caret"></b>'.html_safe, root_path, :id => 'setupdrop', :'data-toggle' => 'dropdown', :class => 'dropdown-toggle' %>

Upvotes: 9

Related Questions