Выпадающий с формой внутри с twitter-bootstrap

Ответ 1

Попробуйте добавить код ниже где-нибудь в вашем javascript. Это должно прекратить это.

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

Ответ 2

(Twitter Bootstrap 2.x)

Вы можете переместить содержимое style="" в таблицы стилей...

Если пользователь вводит неверный пароль:

добавить класс open в li class="dropdown open"

и class error до 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>

Вам не нужны дополнительные css или javascript, чтобы сделать этот взгляд приятным (с TB2.x)

Ответ 3

Если вы не хотите прекращать распространение своих событий или это решение не сработало для вас, вы можете добавить этот код где-нибудь около инициализации начальной загрузки:

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

Ответ 4

Для вашего третьего вопроса - В исходной строке комментария для начальной загрузки bootstrap-dropdown.js

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

и напишите там:

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

Ответ 5

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

max-width устанавливается на 220px, удаляет атрибут и растягивается.

Ответ 6

Его выглядит как проблема с u на основе CSS.

Я исправил его со следующими стилями:

#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;
}

Ответ 7

О ваших вопросах 1 и 2.

• Вы пытались установить длину ввода? Вы можете сделать это, установив атрибут "размер" входного тега. Вы можете читать дальше здесь

• Вы пытались изменить стиль ярлыка? Например:

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

Ответ 8

вы просто добавляете свой контент в тег <form></form>

вот так:

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