web-dev-qa-db-ja.com

入力フィールドに合わせてbootstrap typeaheadの幅を拡張する

私はこの質問が少なくとも3回前に尋ねられたことを知っていますが、私が見た答えは私が探していたものではありませんでした。 Twitter bootstrapがそのtypeahead関数で生成するオートコンプリートフィールドの幅を増やしたいと考えています。フィールド内のすべてのテキストをカバーするように広がることを読んでいます。テキストが長いほどオートコンプリートフィールドが広くなりますが、検索フィールドの幅が広いので、span6にしたいと思います。jqueryの回答をいくつか見ましたが、フォローできませんでした。

jquerycsstwitter-bootstraptypeahead
27
NSaid

マイケル・ワトソンは、彼のコメントの中で最も簡単だと思うことを述べました。

.Twitter-typeahead { width: 100%; }

更新＃1：以下のコメントに基づいて（Steve、Vishiに感謝）、.tt-hint、.tt-input、.tt-dropdown-menu。

更新＃2： mlissnerは.tt-dropdown-menu 今でしょ .tt-menu、したがって最終結果は

.Twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
63
Willie Wheeler

ドロップダウンメニューはtypeaheaddropdown-menuクラスのulです。CSSを使用して幅を設定できます。

.dropdown-menu
{
 width: .... px;
}

Span6の幅は静的ではないため、応答するにはメディアクエリが必要です。

Bootstrap 3の場合、typeahead関数はTB3から削除され、代わりに https://github.com/Twitter/typeahead.js/ を使用します=。 Twitterのブートストラップと統合するには、いくつかの 追加のCSS が必要です。typeahead.jsドロップダウンメニューを取得してデフォルトのブートストラップのテーマに合わせるには、追加のCSSをロードする必要があります。 extended Bootstrap's LESS を試すか、より拡張されたバージョンを探している場合は typeahead.js-bootstrap3.less を試してください。

のドロップダウンは、.tt-dropdown-menuクラスで設定されるようになりました。 CSSを変更する代わりに、幅を動的に設定することもできます。先行入力では、先行入力タグのクラス：

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});
8
Bass Jobsen

ドロップダウンをフィールド幅に一致させるには、次のようなものが必要です。

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

Event.targetとグローバルドキュメントリスナーを使用した上記の小さな改善。

4
Binary Logic

私はBootstrap 3.2.0 typeahead.js-bootstrap3.less を使用し、次のようにdivに入力をネストしています：

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

私はこれをcssに追加する必要もありました：

.tt-input-group {
    width: 100%;
}
2
digitalrizzle

これが純粋なCSSソリューションです。

.dropdown-menuは絶対位置に配置され、position: relative; _を囲むdivにuib-typeahead入力フィールドと設定width: 100%;あなたの.dropdown-menuは修正します。

CSSは次のようになります。

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}
1
Joe McLean

これは新しいバージョン用です：

.Twitter-typeahead, .tt-menu 
{
  display: block !important;
}
0
candlejack