Creating a Login Form via Bootstrap Navbar Dropdown
Working on a new website for fun that leverages Twitter Bootstrap (until the day comes that I can do any of the UI myself), I recently decided to try to integrate my login form with Twitter Bootstrap’s navbar dropdown to eliminate the need for a separate login page. The code was pretty simple, following the documentation on the website and dropping in my Rails ERB form (I’m leveraging Devise for authentication).
The code below renders the image above, which for all intents and purposes looks great and works exactly how I imagined…except that the dropdown javascript code has an event that closes the dropdown when clicked. This behavior is not ideal when you are looking to fill out a form, and a click into one of the text fields closes your form.
<a class=”btn dropdown-toggle” data-toggle=”dropdown” href=”#”>Login<span class=”caret”></span></a>
<ul id=”dropdown-login” class=”dropdown-menu” style=”padding: 5px 10px 0px 10px;”>
<%= form_for(“user”, :url => user_session_path) do |f| %>
<li>
<div class=”control-group”>
<%= f.label :login, :class => “control-label” %>
<div class=”controls”>
<%= f.text_field :login %>
</div>
</div>
</li>
<li>
<div class=”control-group”>
<%= f.label :password, :class => “control-label” %>
<div class=”controls”>
<%= f.password_field :password %>
</div>
</div>
</li>
<li>
<div class=”control-group”>
<%= f.label :remember_me, :class => “control-label” %>
<div class=”controls”>
<%= f.check_box :remember_me %>
</div>
</div>
</li>
<li>
<%= f.submit “Sign in”, :class => “btn btn-primary” %>
</li>
<% end %>
</ul>
Fortunately, it is pretty easy to stop this from occurring by stopping the click event from bubbling up. By creating a click handler on my “dropdown-login” tag, I was able to stop the propagation of the event, which allowed my form to work as desired.
// Prevent closing the sign in form on click
j$(‘#dropdown-login’).click(function(e) {
e.stopPropagation();
);