Bootstrap Dropdown Not Styling Properly

Question

I'm having an issue with twitter/bootstrap dropdowns not being styled properly. I'm in Rails 3, using the bootstrap-sass gem. The dropdown functions properly, coming down when I click the button, but doesn't style.

Basically it looks like this: broken

When it ought to look like this: working

These two screenshots were taken of different apps forked about two months ago from the same code base. They have identical custom CSS styling, of which none of it should affect the dropdown, and the working one is only importing the alert, collapse, dropdown, modal, and transition bootstrap plugins while the broken one uses the all-in-one bootstrap.js. I've tried deleting bootstrap.js and replacing it with only those plugins but the problem persists.

The dropdowns are also called the same way, by rendering a partial with locals.

The render:

<%= render :partial => 'layouts/dropdown', :locals => { :space => true, :collection => @statuses, :title => "Set Status", :subtitle => "Statuses:", :label => ->s{s}, :value => ->s{"&status=" + s}, :path => set_status_tickets_path, :id => "ticket-status", :type => :note } %>

The partial:

<div class="btn-group pull-right toggleCheck" style="display:none;" id='<%= id %>'>
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><%= title %><span class="caret"></span></a>
  <ul class="dropdown-menu" style="right: 0; left: auto;">
      <% if type == :search %>
        <li style="padding:5px 10px;"><input class="drop-search focus-open hold" type='text' placeholder='Search' style="margin:0px;"></li>
      <% elsif type == :note %>
        <li style="padding:5px 10px;"><textarea placeholder='Status notes' class="hold focus-open note-box" rows="4" style="margin:0px; resize: none;"></textarea></li>
      <% end %>
    <li style="padding:5px 10px; font-weight:700;"><%= subtitle %></li>
    <div class="choices">
    <% collection.each do |c| %>
      <li><%= link_to (label.(c) + '<span class="comment"></span>').html_safe, '#', :value => value.(c), :path => path, :iden => label.(c).downcase.gsub(/\s/, '-') %></li>
    <% end %>
    </div>
  </ul>
</div>

Can anyone shed some light on what I might be doing wrong here? Also this is my first question, so if I've done something wrong or haven't included enough information let me know. Thanks!

Answer 1

I figured it out, the problem was with <div class="choices">. For some reason in one project, it wasn't inheriting the style from dropdown-menu, while in the other it was.

The choices class is used by a javascript function (for selection), so getting rid of it wasn't an option. For a somewhat janky solution, I simply added the choices class to bootstrap's CSS in the appropriate locations.