Dropdown with a form inside with twitter-bootstrap

Question

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:

1. The text and password input fields are far too big, how can I adjust them? Making the dropdown box bigger would be OK too.
2. The labels for the fields are too dark, how can I lighten them up a bit?
3. 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="&#x2713;" /><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?

Answer 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();   }); 

Answer 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)