web-dev-qa-db-ja.com

Twitter-bootstrapを使用したフォームを含むドロップダウン

Twitter Bootstrap CSSフレームワークで構築されたTopBarにドロップダウンがあります。

次の3つの問題があり、解決策が見つかりません。

  1. テキストとパスワードの入力フィールドが大きすぎます。どうすれば調整できますか？ドロップダウンボックスを大きくしても問題ありません。
  2. フィールドのラベルが暗すぎます。少し明るくするにはどうすればよいですか？
  3. フィールドの1つをクリックすると、ドロップダウンが閉じます。再度開く必要があり、次のフィールドをクリックするまで入力できます。ドロップダウンが閉じられていても、値は保持されます。どうすれば開いたままにできますか？

これが問題1と2のスクリーンショットです：

Screenshot of my problems 1 and 2

また、現在のTopBarのHTMLもここにあります。

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

Railsおよび自動生成により、非表示の入力が必要です。

Twitterが使用するログインフォームの実装を既にコピーしようとしましたが、それを試してみると、TopBarの高さは約250ピクセルで、ドロップダウンのコンテンツは開いており、閉じることができません。

bootstrap docs。で示唆されているように、本文に40pxのトップパディングを除いて、これまでカスタムCSSまたはJavaScriptはありません。

誰かがこれで私を助けることができますか？

html5css3twitter-bootstrapdrop-down-menu
46
NobbZ

JavaScriptのどこかに以下のコードを追加してみてください。それが起こらないようにする必要があります。

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

（Twitter Bootstrap 2.x）

style=""のコンテンツをスタイルシートに移動したい場合があります...

ユーザーが間違ったパスワードを入力した場合：

クラスopenをli class="dropdown open"に追加します

およびクラス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を使用）

8
Mike

イベントの伝播を停止したくない場合、またはその解決策が機能しなかった場合は、ブートストラップドロップダウンの初期化の近くにこのコードを追加できます。

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

3番目の質問-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();
    }
});
6
kajo

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

max-widthは220pxに設定され、属性を削除すると、それ自体が拡大されます。

5
DregondRahl

あなたが直面している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;
}
2
guruguldmand

質問1と2について.

  1. 入力の長さを設定しようとしましたか？これを行うには、inputタグの「サイズ」属性を設定します。 詳細はこちら

  2. ラベルのスタイルを変更してみましたか？例えば：

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

<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>
0
porya ras