Dropdown with a form inside with twitter-bootstrap

Problem

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:

Screenshot of my 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?

Problem courtesy of: NobbZ

Solution

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 courtesy of: Travis

View additional discussion.