Skip to content

Comment Feed

77 Responses

  1. Awesome… this worked like a charm… let us know if you posted this on Stack Exchange and looking for some bounty :)

  2. I’m a novice, but you have a space in your li that shouldn’t be there:

    should be

    Thanks for this post!

  3. 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.

  4. 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?

  5. 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!

    jamifsudApril 30, 2012 @ 9:53 PMReply
    • 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!

  6. Thanks for sharing this! Works like a charm!

    DanielMay 7, 2012 @ 6:39 PMReply
  7. Copied verbatim and its not working – I see “Empty string passed to getElementById().” in console.log

  8. 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.

  9. you sir are a scholar, and a gentleman!

  10. 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

    andrewkJune 19, 2012 @ 1:32 AMReply
  11. 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

    Danilo BarsottiJuly 1, 2012 @ 3:01 PMReply
  12. 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

  13. Thank you for this helpful, dude!

  14. For the JS code to work you have to change the the from:

    to:

    (no space)

    Chris WherryJuly 17, 2012 @ 12:29 AMReply
  15. As anon said, you should code listing:
    li class=”drop down” to li class=”dropdown”

    otherwise it’s all good

  16. Great tuts. I love Bootstrap. Thanks for sharing.

  17. thanks a lot! had managed to show the div but was thoroughly baffled by its disappearance upon clicking..

  18. 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!

  19. 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?

  20. 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…

  21. 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)

  22. thanks this the Best iv seen

  23. 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!

  24. 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?

  25. 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.

  26. 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.

  27. Hi Everyone ,
    Its seems for me that the click problem fix is not working for Firefox .. Any idea how to fix it ?

    Best regards.

  28. 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?

  29. I love it. Exactly what I was looking for.

    Keep it up!

    Greets

  30. 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!

  31. It seems that my HTML wasnt posted. Its found here on this jsFiddle http://jsfiddle.net/QCvR5/

  32. 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).

      jamifsudJanuary 1, 2013 @ 8:53 PMReply
  33. Thank you very much for sharing this. Implemented it and works like a charm :-)

    derbelgierFebruary 2, 2013 @ 6:32 AMReply
  34. Very well done. Thanks for sharing.

  35. 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?

  36. 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

  37. 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.

  38. 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.

    Vinicius SpaderMarch 21, 2013 @ 8:05 AMReply
  39. Great!

    However this is not working out when moving to a mobile mode and bootstrap responsive modifies the layout. Focusing on any input controls closes it :(

    Can you please help?

    pvKhatriJune 2, 2013 @ 1:42 PMReply
  40. For example, they tend dieting tips to notice
    the large portions in restaurants but eat only enough to feel full.
    The difference is that I don’t like feeling like a beached whale at 5 am. In this area, there has to be a water drinker. Research shows that the best way to approach things is just to accept that you’re going to have to
    quit weighing every day but for now that is where it stands.

  41. Great implementation – very helpful. I have one question regarding how to keep the popup positioned so that it is not clipped off – currently if I make my browser window narrow the popup dialog is getting clipped because it is always being positioned right under the left side of the menu text. Has anyone else had this issue and found a solution? Is this something the the responsice bootstrap should be handling?

    Thanks,

    Eric JamesJune 6, 2013 @ 3:22 PMReply
  42. It doesn’t function well in responsive view.

    It’s better to put a after the username and password input tag.

  43. In order to get the responsive mobile UI to work I had to add the class “collapse” to this div:

  44. Sorry, html didn’t come through filter:
    In order to get the responsive mobile UI to work div must have class “nav-collapse” *and* “collapse”.

  45. Thank you!! so much
    that js snippet saved my life

  46. 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!

  47. Hi,
    The code is the one I was looking for. But my Sign in does not go to the right on the nav bar. I copy the code exactly and JS.
    Would you please help.
    Thanks

    Latina TanevSeptember 30, 2013 @ 8:54 PMReply
  48. But side efffects of Acomplia are mild like
    nausea, dizziness, palpitation, restlessness, tremor, mouth dryness and constipation.

    Instead it is able to enhanjce and boost in consciousness, awareness and boosts your mood.

    Tip #3 – Your Diet doesn’t have to include unnatural substances and not known substances.

    You can lose much more if you combine this with a
    healthy diet and daily exercise. When someone wants to
    lose weight it can make them an easy target for the sellers of cambogias that claim to offer
    fast weight loss without changing one’s diet or lifestyle.

  49. This works great for me, thanks.

    I have noticed though that on my iphone, the login popup appears, but when trying to click anywhere on it, the popup just closes again and I cannot click in to the text fields or press the login button.

    Any solution to this?

  50. Thanks a lot for sharing this. I have recently decided to code a WordPress theme for my blog using Bootstrap and I ran into this trouble while I was creating the static version of my home page. Your solution came at the right time.

  51. what if im using it as a contact form how do i setup the email part?

  52. nee oru kidilam aaneda! Thanks a lot!

  53. Awesome tips !! Thanks for sharing !

  54. You can use

    $(‘.dropdown-toggle’).on(‘click.bs.dropdown’, function(e) {e.stopPropagation(); })

    anonymous cowardNovember 15, 2013 @ 4:33 AMReply
  55. We stumbled over here from a different page and thought I may as well check
    things out. I like what I see so now i’m following you.

    Look forward to finding out about your web page for a second time.

  56. I simply could not depart your site prior to suggesting that I actually enjoyed the usual information an individual supply in your visitors?

    Is going to be again regularly to inspect new posts

  57. Twwo others that seem to be missing from a lot of
    the good for you recipes is: ease annd selection:
    both of which are offered up in thhe Hungry Girl cook books.
    Often described as “a large dog in the body of a small dog,” it is simjilar to the
    Norwegian Buhund and relayed to modern Welshi Corgjs as well aas Shetland Sheepdogs.

    I put a small amount of water in a plastic cup and quietly stood in
    front of my dog, without saying a word.

  58. I’m really impressed along with your writing skills and also with the structure to
    your weblog. Is that this a paid theme or did you modify it your self?
    Anyway keep up the excellent high quality writing, it’s uncommon to peer a
    great blog like this one today..

  59. Awesome Tip!!! Was exactly what I needed for a map layer drop down list.

  60. Thank You………

    for help me………..

    Muneer AhmadMarch 15, 2014 @ 4:02 AMReply
  61. Thanks designed for shaing such a fasfidious idea, piece of
    writing is nice, thawts why i havbe read it completely

  62. $(function() {
    // Setup drop down menu
    $(‘.dropdown-toggle’).dropdown();

    // Fix input element click problem
    $(‘.dropdown input, .dropdown label’).click(function(e) {
    e.stopPropagation();
    });
    });
    ———
    this code is good for textbox and label
    but when i click on button (asp.net control) then dropdown hide
    pls guide me.

  63. http://bootnipets.com/
    elements, playground, utilities and code snippets for Bootstrap



Some HTML is OK

or, reply to this post via trackback.

Continuing the Discussion

  1. [...] Forms inside Bootstrap Dropdowns This is more of a hack but it really comes handy if you wanna have login forms in those simple to use Bootstrap Dropdown menus. [...]

  2. [...] Forms inside Bootstrap Dropdowns This is more of a hack but it really comes handy if you wanna have login forms in those simple to use Bootstrap Dropdown menus. [...]

  3. [...] Forms inside Bootstrap DropdownsThis is more of a hack but it really comes handy if you wanna have login forms in those simple to use Bootstrap Dropdown menus. [...]

  4. [...] Forms inside Bootstrap Dropdowns This is more of a hack but it really comes handy if you wanna have login forms in those simple to use Bootstrap Dropdown menus. [...]