web-dev-qa-db-ja.com

Typeahead.jsはBootstrap入力グループを妨害します

Typeahead.jsがTwitterを分割しないようにするにはどうすればよいですかBootstrap 3つの入力グループ？Typeahead JavaScriptを入力グループの一部であるテキスト領域、結合されたテキスト領域、送信ボタンに向けるたびにこれはTypeaheadのバグにすぎませんか、それとも回避策はありますか？

Typeahead.JSを読み込まない場合：

enter image description here

Typeahead.JSの場合：

enter image description here

私の元のHTML：

    <div class="col-sm-4 hidden-xs">
    <form class="navbar-form" role="search">
        <div class="input-group">
        <input type="text" id="tags" class="form-control" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">Search</button>
            </div>
        </div>
    </form> 
    </div>

TypeaheadがこのHTMLに対して行うことは次のとおりです。

<div class="col-sm-4 hidden-xs">
        <form class="navbar-form" role="search">
            <div class="input-group">
            <span class="Twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-Origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;">
            <input type="text" id="tags" class="form-control tt-input" name="q" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; Word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">
            </pre>
            <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-0"></div>
            </span>
            </span>
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit">Search</button>
                </div>
            </div>
        </form> 
        </div>
javascripthtmlcsstwitter-bootstraptypeahead.js
25
caitlin

このプロジェクトは私のために問題を部分的に解決しました： https://github.com/hyspace/typeahead.js-bootstrap3.less

唯一の顕著な問題は、.btnと.form-controlの両方にシャドウ効果を適用すると、入力フィールドとボタンの間にシャドウが描画されることです。

enter image description here

14
daniel.sedlacek
。Twitter-typeahead {float：left;幅：100％}
29
Mahesh

Bootstrap v4ソリューション：

.input-group > .Twitter-typeahead {
   flex: 1 1 auto;
   width: auto;
}
3
Max Toro

多分？

.Twitter-typeahead > .form-control{
  width: inherit !important;
}
2
Robin Gomez

これにより、テキストボックスの左側が四角い（丸くない）場合の問題が修正されます。

.input-group .Twitter-typeahead .form-control:not(:first-child):not(:last-child) {
  border-radius: 4px 0px 0px 4px;
}
2
Joric