Bootstrap
Twitter Bootstrap is great, really great. If you’re spending a tremendous amount of time and energy fighting to create your site’s base layout or ensure that it is cross-browser compatible, you should check it out. The toolkit was born about ten months ago when a couple of engineers over at Twitter decided that the process of getting the base layout of an web app (a part of the “bootstrapping” process) shouldn’t be as difficult was it was. As a result of this, they created Bootstrap to streamline the process. Bootstrap comes with all of the necessary JavaScript and CSS to whip together a clean looking website with a ton of different components (tables, progress bars, alerts, tabs, a navigation bar, etc).
I recently made the decision to use Bootstrap on my latest project (stay tuned) and I thought I’d share a solution to a
small hiccup I ran into. You’ve no doubt run into those websites that let you sign in via a small drop down (…popup?) window triggered from a button near the top of their site. If not check out the top right corner of Woopra: this is what we’re going to be creating shortly. I’ve always been a fan of these authentication methods: in my opinion this box gives your users a quick and easy way to login into your website (though I don’t think its a replacement for a dedicated login page – what if the user doesn’t have JavaScript enabled?).
The Code
I’m going to focus on actually getting the login drop down working as I ran into an interesting issue doing so. If you’re interested in learning more about the navbar included in Bootstrap read up on it here and check out the page source code for examples. The form will be a simple username and password combo with a remember me option as pictured at the right. First, the HTML to set up the navigation bar login form:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand">My Site</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
...
...
<!-- The drop down menu -->
<ul class="nav pull-right">
<li><a href="/users/sign_up">Sign Up</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
This HTML should be posted at (or near) the top of your HTML file to get the navigation bar to rest at the top. The exact location is dependent on your specific setup. Here’s what we have so far:
The sign up and sign in buttons are pulled to the right by encapsulating the buttons in their own list element and adding the “pull-right” class to it. Pay attention to that, this means you can break up your navigation bar into independent lists and assign different functionality to each one. Not a game changer, but that could come in handy one day. Once we have added the list to the navbar we add elements to it by appending list items (I’ve added a sign up button and a divider simply for reference). Now normally to create the drop down we would add another list item that contains an unordered list (this unordered list would contain the actual options that appear in the drop down menu). This would give us a normal menu like you see on the Twitter Bootstrap navbar example, but this isn’t what we want. Instead, we create a list element as usual (giving it the normal anchor tag to display a title) but we put a div in place of the unordered list. With a few padding changes (see above) we have exactly the container we need to hold our form. We also need to throw a line of JavaScript into the mix to get our menu to open, but we’ll get to that in a second.
You can put whatever form you want in this div. I’ve included a simple example that I feel is clean and simple (and looks nice with Bootstrap):
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8"> <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" /> <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" /> <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" /> <label class="string optional" for="user_remember_me"> Remember me</label> <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" /> </form>
So that’s all fine and dandy, but if you try to use your nifty new login form you’ll notice that clicking into the username or password box makes the popup menu disappear. Herein lies the problem that took a bit of searching and code reading to fix. The way Twitter’s bootstrap-dropdown.js is set up, this click causes the toggle method of this drop down to be fired, we need to prevent that. In order to do this, all we have to do is stop the propagation of the click event in the form input elements. Doing so will stop the event from being passed up the DOM tree, thus stopping bootstrap-dropdown.js from toggling the drop down display. Here’s the (short) JS file required to do this, including the bit I mentioned earlier to initialize the drop down plugin.
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
That’s it! You can now use the form elements as normal and the drop down will still toggle as normal outside of the input elements.
Awesome… this worked like a charm… let us know if you posted this on Stack Exchange and looking for some bounty
I’m a novice, but you have a space in your li that shouldn’t be there:
should be
Thanks for this post!
Hello… Thank you for your post. I was very excited when I found it because this is exactly what I’m hoping to accomplish. I used your example exactly, but unfortunately, it does not work for me. I can not even get the dropdown to display. Maybe you could add a link to a fully working example? I think that might help me and future readers. Thanks again for your work.
Thanks for the post, it was exactly what i needed. I see that you send the user to new page if they enter an incorrect username or password. i display “Incorrect Username or Password” at the bottom of the login dropdown, but the user has to click on the Login link to see the message….how do I keep the login dropdown open instead of it closing on the “click” of the Submit button?
Jeff,
Try attaching the same stopPropagation technique that you saw above on the button click and with that include some logic to do the authentication (via AJAX) and then either display the message or close the dropdown yourself. You can close the dropdown by removing the “open” class from LI that contains the dropdown we’re working with.
If you’re doing this without AJAX, you could configure your server to add the class “open” to the dropdown’s LI and then add the message. This would cause it to be opened upon page load. (I haven’t explicitly tested this but I think it should work).
Hope that helps!
jamifsud-
you rock. not using ajax, but having server add the ‘open’ class to the LI works perfectly. my fault for not looking through the bootstrap-dropdown.js file more closely. thanks!
Thanks for sharing this! Works like a charm!
Copied verbatim and its not working – I see “Empty string passed to getElementById().” in console.log
Where do I put that function at the end? I tried creating a separate file for it but it doesn’t work. Nor does it work within the HTML.
you sir are a scholar, and a gentleman!
Hey – Great method, used this with ajax for a very nice login form.
only thing i cannot get working is when the dropdown is clicked to have the first input gain focus (thus not needing to click into the username box)
ive tried with <a onclick="$('input:text:visible:first').focus();" which worked on the second dropdown toggle only, not on the first.
Thanks
Andrew
Hey guy, I found a little issue in your code, where you did the stopPropagation you need to alter the jquery selector to this:
$(‘.dropdown-menu input, .dropdown-menu label’).click(function(e) {
e.stopPropagation();
});
Thanks for the amazing tutorial. cheers
Hi, I tried to follow your tutorial, but I have no experience with web-development at all. I am having a problem inserting in the 2nd snippet of code, and posted the question here on stackoverflow. Could you please take a look at my code and see what’s wrong?
http://stackoverflow.com/questions/11303589/adding-a-dropdown-login-in-bootstrap
Thank you for this helpful, dude!
*helpful post
For the JS code to work you have to change the the from:
to:
(no space)
As anon said, you should code listing:
li class=”drop down” to li class=”dropdown”
otherwise it’s all good
Great tuts. I love Bootstrap. Thanks for sharing.
thanks a lot! had managed to show the div but was thoroughly baffled by its disappearance upon clicking..
One minor error – the Javascript you use to stop the propagation doesn’t work, because the class is not “dropdown” it is “drop” and “down” – changing it to:
$(‘.drop input, .drop label’).click(function(e) {
e.stopPropagation();
});
Fixed it for me!
Sorry about that the class should have been “dropdown”, I’ve updated the post.
Hi, thanks for the wonderful tutorial it was just what i was looking for. I do have a problem when i click in the input field the drop down closes before i can enter anything making the form unusable. seems the
e.stopPropagation() isn’t working i tried e.preventDefault() and still no results. any ideas wy this isn’t working?
okay i found the problem my bad li class was drop down where it should be class=”dropdown” one word.
Thanks and keep up the good work…
Awesome tutorial!!
I had some trouble getting the javascript at the end to work but i found an easy enough workaround.
In the html replace the div class=”dropdown-menu” with “dropdown-menu login-menu”
and replace ‘.dropdown input, .dropdown label’ with ‘.login-menu form’ in the javascript
I am in no way in expert in this field but FIY for those who don’t know you should be copy/pasting that JavaScript code at the end of bootstrap-dropdown.js file (figured that out after 2 hours of scratching my head)
thanks this the Best iv seen
Hi, Thanks for sharing! The dropdown works great, but i have a little problem. Adding the javascript code to the assets/javascript/application.js don’t work for me, the menu closes every time i click. I have a partial view for the navbar, and also i try to include the js code directly to the header partial with the same results, is there any other solution to get this working? Using rails 3.2.8.
Thanks!
I’m not experiencing the disappearing Form when clicking the text form fields. Is this something that was automatically fixed in Bootstrap 2.1.1?
Looks like it, they seem to have added a line to stop the propagation, but I haven’t tested to confirm this.
Great post it is exactly what I was looking for. Sorry for the novice question but the javascript sample that you’ve provided doesn’t seem to be working for me. Where do I need to place it in order for the form to stay open when entering information?
thank you.
Jeff,
I believe the code:
li class=”drop down”
should be
li class=”dropdown”
without the space… could be causing a problem for some using it.
Thanks!
yup that did it…thanks
Hi Everyone ,
Its seems for me that the click problem fix is not working for Firefox .. Any idea how to fix it ?
Best regards.
How about a non-form form. Just a text box and a href styled as a button. Like a search that is triggered via javascript and uses ajax to reload the page with results. Don’t want a full form with post/submit. This seems to fall apart and not style very well. Thoughts?
I love it. Exactly what I was looking for.
Keep it up!
Greets
Hi, im trying to implement this in a button but i really cant seem to make it work.
Could you please take a look at my code below?
################## CODE ###############
Search
Name
################# Javascript Code ########
$(function() {
// Setup drop down menu
$(‘.dropdown-toggle’).dropdown();
// Fix input element click problem
$(‘.dropdown input, .dropdown label’).click(function(e) {
e.stopPropagation();
});
});
##########################################
Id really appreciate it if someone helps me. Thank you!
It seems that my HTML wasnt posted. Its found here on this jsFiddle http://jsfiddle.net/QCvR5/
Hi people!
Very useful and good code
I have a problem, when the user types incorrect email or password, and clicks Sign in, the page redirects to the same page, but Login form is closed, how to make it to be open automatically and show error message, or maybe to show a popup with error message?
Try attaching the same stopPropagation technique that you saw above on the button click and with that include some logic to do the authentication (via AJAX) and then either display the message or close the dropdown yourself. You can close the dropdown by removing the “open” class from LI that contains the dropdown we’re working with.
If you’re doing this without AJAX, you could configure your server to add the class “open” to the dropdown’s LI and then add the message. This would cause it to be opened upon page load. (I haven’t explicitly tested this but I think it should work).
Thank you very much for sharing this. Implemented it and works like a charm
Very well done. Thanks for sharing.
i am hoping this can be done on wordpress…. i noticed woopra runs on wordpress and their homepage is WP based.
do you know how to do this with wp or is there a plugin?
How do you display errors when it the server replies with a fail? When I try to pop up an alert on an error they don’t display.
thanks
Hi great post! works perfectly,
could you point me in the right direction for the [YOUR ACTION] in the form?
thanks
Sure, [YOUR ACTION] is whatever you’d want the action of the form to be. If you want submitting the form to send them to the login page then set this to the login URL. If you’re handling this completely in JS then you can leave this blank.
How does the checkbox get this rounded corners? And how the label for remember_me is placed at right?
Those two features are not working for me.
I’m applying it on a Rails project wich I imported bootstrap-sass.