Dropdown with form inside with twitter-bootstrap

Question

I have a dropdown in my TopBar built with CSS Bootstrap CSS.

I have 3 problems with which I can not find a solution:

• The text and password input fields are too large, how can I configure them? Creating a popup window would be OK too.
• The field labels are too dark, how can I lighten them up a bit?
• A window will open when I click on one of the fields. I need to open it again, and then I can print until it clicks in the next field. Values ​​are retained even if the drop-down list is closed. How can I make him stay open?

Here is a screenshot of problems 1 and 2:

Also here is the HTML for 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, covert entry is required by the rails and autogenerated.

I already tried to copy the implementation of the login form that Twitter uses, but when I tried it, TopBar is 250 pixels tall and the contents of the drop-down list are open, not closed.

I don't have custom CSS or JavaScript so far, except for the top 40px padding in the body, as suggested by the docs for download.

Can someone help me?

Answer 1

Try adding the code below somewhere in your javascript. That should stop it.

  $('.dropdown-menu').find('form').click(function (e) { e.stopPropagation(); }); 

Answer 2

(Twitter Bootstrap 2.x)

You can move the contents of style="" to the style sheets ...

If the user enters an invalid password:

add open class to li class="dropdown open"

and class error before 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 extra css or javascript to make this look enjoyable (with TB2.x)

Answer 3

If you do not want to stop distributing your events or this solution did not work for you, you can add this code somewhere near the initialization of the bootstrap:

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

Answer 4

For your third question - In the initial comment line for bootstrap bootstrap-dropdown.js

 $('html').on('click.dropdown.data-api', clearMenus) 

and write there:

 $(document).bind('click', function(e) { var $clicked = $(e.target); if (!$clicked.hasClass("dropdown-menu") && !$clicked.parents().hasClass("dropdown-menu")){ clearMenus(); } }); 

Answer 5

https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559

max-width is set to 220px, removes the attribute and stretches.

Answer 6

Its looks like a CSS based u problem.

I fixed it with the following styles:

 #signin-dropdown { padding-left: 5px; padding-right: 5px; padding-top: 1em; } #signin-dropdown form { margin:0px; } #signin-dropdown form .textbox { margin-bottom:0em; padding-top:0em; } #signin-dropdown form .subchk { margin-bottom: 5px; padding-top: 8px; } #username, #password, #userpassword { color: #404040; float: left; font-size: 13px; line-height: 18px; padding-top: 0px; text-align: left !important; width: 140px; } 

Answer 7

About your questions 1 and 2.

• Have you tried to set the input length? You can do this by setting the size attribute of the input tag. You can read more here.

• Have you tried changing the label style? For example:

 <span style="color:#FFFFFF">Username </span> 

Answer 8

you just add your content to the <form></form>

like this:

  <div class="dropdown dropdown-scroll" id="selectedClient"> <button class="btn btn-block btn-lg btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> انتخاب <span class="caret"></span> </button> <div class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu1"> <button type="button" class="close">&times;</button> <form> <ul> <li role="presentation"> <input id="searchSubClientInput" type="text" class="form-control" placeholder="جستجو بر اساس نام خانوادگی" ng-model="query"> </li> </ul> </form> <ul class="select-list scrollable-menu"> <li class="dropdown-header">خودم</li> </ul> </div> </div>