Dropdown with a form inside with twitter-bootstrap
Solution 1
Try adding the code below somewhere in your javascript. It should stop it from happening.
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
Solution 2
(Twitter Bootstrap 2.x)
You may want to move the contents of style=""
to your stylesheets...
If user entered wrong password:
add class open
to li class="dropdown open"
and class error
to fieldset class="control-group error"
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
<div class="dropdown-menu">
<form action="" id="form_login" style="margin: 0; padding: 3px 15px" accept-charset="utf-8" method="post">
<fieldset class="control-group">
<label for="form_email" class="control-label">Email address</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="email" name="email" id="form_email" autocomplete="on" class="span2">
</div>
</div>
</fieldset>
<fieldset class="control-group">
<label for="form_password" class="control-label">Password</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" name="password" id="form_password" class="span2">
</div>
</div>
</fieldset>
<label class="checkbox">
<input type="checkbox" name="remember" value="true"> Remember me
</label>
<p class="navbar-text">
<button type="submit" class="btn btn-primary">Login</button>
</p>
</form>
</div>
</li>
</ul>
You don't need any extra css or javascript to make this look nice (with TB2.x)
Solution 3
In case you don't want to stop propagation of your events, or that solution didn't work for you, you can add this code somewhere near initialization of bootstrap-dropdown:
$('html').off('click.dropdown.data-api');
$('html').on('click.dropdown.data-api', function(e) {
if(!$(e.target).parents().is('.dropdown-menu form')) {
$('.dropdown').removeClass('open');
}
});
Solution 4
For your third question - In your bootstrap-dropdown.js comment source code row
$('html').on('click.dropdown.data-api', clearMenus)
and write there this:
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("dropdown-menu") &&
!$clicked.parents().hasClass("dropdown-menu")){
clearMenus();
}
});
Solution 5
https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559
max-width is set to 220px, remove the attribute and it will stretch itself.
Related videos on Youtube
Comments
-
NobbZ about 4 years
I have a Dropdown in my TopBar, built with the Twitter Bootstrap CSS framework.
I have 3 problems with it that I can't find any solution to:
- The text and password input fields are far too big, how can I adjust them? Making the dropdown box bigger would be OK too.
- The labels for the fields are too dark, how can I lighten them up a bit?
- The Dropdown is closing when I click into one of the fields. I have to reopen it and then I can type until clicking in the next field. The values are preserved even when the dropdown is closed. How can I make it stay open?
Here is a screenshot of problems 1 and 2:
Also here is the HTML for the TopBar as it is now.
<div class='topbar-wrapper'> <div class='topbar'> <div class='topbar-inner'> <div class='container'> <h3> <a href="/">Webworld</a> </h3> <ul class='nav'> <li>FILLER...</li> </ul> <ul class='nav secondary-nav'> <li class='dropdown' data-dropdown='dropdown'> <a href="#" class="dropdown-toggle">Login</a> <div class='dropdown-menu' id='signin-dropdown'> <form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div> <fieldset class='textbox'> <label id='js-username'> <span>Username</span> <input autocomplete="on" id="username" name="username" type="text" /> </label> <label id='password'> <span>Passwort</span> <input id="userpassword" name="userpassword" type="password" /> </label> </fieldset> <fieldset class='subchk'> <input name="commit" type="submit" value="Log In" /> </fieldset> </form> </div> </li> </ul> </div> </div> </div> </div>
There hidden input is needed by rails and autogenerated.
I've already tried to copy the implementation of the login form that twitter uses, but when I tried that, the TopBar is about 250px in height and the content of the dropdown is open, not closeable.
I have no custom CSS or JavaScript so far, except for the top-padding of 40px in the body as suggested by the bootstrap docs.
Can someone help me with this?
-
NobbZ over 12 yearsOK, defining the styles inline :D Im curious why I have not seen that myself :) But the problem with the closing box remains.
-
NobbZ over 12 yearsThis is really solution for problem 1 and works much better than the solution mentioned by marimaf, but problem 3 remains unresolved :( And especially #3 is the most annoying.
-
Lasse Christiansen over 12 yearsPerfect, worked for me too - however, I think you are missing
);
to proper end the definition of the function to execute when theclick
event is triggered :) -
Gabriel Llamas about 11 yearsThis is no longer valid, refer to kajo's answer
-
Matthew almost 11 yearsIf you add the selector for this max-width attribute it would make the answer more clear since the link you added is dead.
-
srt8driver almost 11 yearsHaving the same problem as this user but these solutions are not working: stackoverflow.com/questions/18306433/… Decided to open up a separate question rather than this old one in case the issue is different for newer builds.
-
drzaus over 10 yearsif you don't want to modify an externally maintained plugin, @crimefighter's solution can accomplish the same thing