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

Answer 1

Its looks like a CSS based problem u are facing.

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 2

you just add your content in <form></form> tag

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>

Answer 3

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

Answer 4

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

max-width is set to 220px, remove the attribute and it will stretch itself.

Answer 5

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 6

About your questions 1 and 2.

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

2. Did you try changing the style of the label? For example:

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