Bootstrap button dropdown not showing in my Rails application

Question

My Rails 4 application has the following edit.html.haml view for the projects:

%h1
  Edit Project
  .actions
    = link_to 'Browse', projects_path, :class => 'btn'
    = link_to 'View', project_path, :class => 'btn'
    - if ((@project.teams.map { |t| t.user_id }.include? current_user.id) || is_admin?)
      %a.btn.dropdown{:hfref => '#', :data => {:toggle => 'dropdown'}}
        = 'Time'
        %span.caret
        %ul.dropdown-menu{:role => 'menu', 'aria-labelledby' => 'dLabel'}
          %li
            = link_to 'Submitted', billables_path(:project_id => @project.id, :status => 'Submitted')
          %li
            = link_to 'Totalled', billables_path(:project_id => @project.id, :status => 'Totalled')
          %li
            = link_to 'Adjusted', billables_path(:project_id => @project.id, :status => 'Adjusted')
          %li
            = link_to 'Billed', billables_path(:project_id => @project.id, :status => 'Billed')
      = link_to 'Software', tools_path(:project_id => @project.id), :class => 'btn'
      = link_to 'Expense', expenses_path(:project_id => @project.id), :class => 'btn'
    = render :partial => 'team', :locals => { :project => @project }

= render :partial => 'form'

I am not sure why the drop-down menu is not displaying when I click on the 'Time' button underneath which there are four menu items. The browser console does not show any errors.

Answer 1

Are you loading the Bootstrap's javascript file? The dropdown is made interactive with the dropdown javaScript plugin included in bootstrap.js.

Answer 2

I figured it out. I am posting my solution for those who might be interested. Here is the revised code that works as I want it to:

%h1
  Edit Project
  .actions
    = link_to 'Browse', projects_path, :class => 'btn'
    = link_to 'View', project_path, :class => 'btn'
    - if ((@project.teams.map { |t| t.user_id }.include? current_user.id) || is_admin?)
      %span.dropdown
        %a.dropdown-toggle{:role => 'button', :href => '#', :data => {:toggle => 'dropdown'}, :class => 'btn'}
          = 'Time'
          %b.caret
        %ul.dropdown-menu{:role => 'menu', 'aria-labelledby' => 'dLabel'}
          %li
            = link_to 'Submitted', billables_path(:project_id => @project.id, :status => 'Submitted')
          %li
            = link_to 'Totalled', billables_path(:project_id => @project.id, :status => 'Totalled')
          %li
            = link_to 'Adjusted', billables_path(:project_id => @project.id, :status => 'Adjused')
          %li
            = link_to 'Billed', billables_path(:project_id => @project.id, :status => 'Billed')
      = link_to 'Software', tools_path(:project_id => @project.id), :class => 'btn'
      = link_to 'Expense', expenses_path(:project_id => @project.id), :class => 'btn'
    = render :partial => 'team', :locals => { :project => @project }

= render :partial => 'form'

It is indeed a CSS and HTML issue. 1. Note the %span.dropdown underneath -if.. It ensures that the link or button stays inline with the rest of the links or buttons. With this tiny change, it all works.

@Papzord, thank you for trying to help me.