web-dev-qa-db-ja.com

Bootstrap 3を使用したTwitter TypeaheadでのCSSの問題

Bootstrap 3.のリリースに伴い、Typeaheadはこれを支持して削除されました。
https://github.com/Twitter/typeahead.js

データのリモートフェッチで正常に統合しました

しかし、オートコンプリートに問題があります

enter image description here

ご覧のとおり、テキストボックスに2つのテキストが表示されています。

ドキュメントに記載されているようにcss（ https://github.com/jharding/typeahead.js-bootstrap.css ）を含めましたが、運はありません。

任意の助けや提案をいただければ幸いです。

問題を示すjsfiddle：
http://jsfiddle.net/KrtB5/

[〜＃〜] html [〜＃〜]

<body>
    <div class="container">
        <label>State</label> <input type="text" class="typeahead form-control" />
    </div>
</body>

Javascript：

$('.typeahead').typeahead({
    name: 'Some name',
    local: ['test', 'abc', 'def']
})
jquerycsscss3typeahead.jstwitter-bootstrap-3
59
Jaime Sangcap

EDIT：Bootstrap 3.0EDIT 2：Typeaheadコールが変更されました。新しいjsfiddleを参照してください

スタイリングを試してみたところ、フォームコントロールクラスはttヒントと完全に一致していないようです。そのため、マージンと境界線が揃うようにしました。 Hieu Nguyenの答えを取り、ボーダー半径とinput-small/input-largeのサポートを追加する

[〜＃〜] css [〜＃〜]

.Twitter-typeahead .tt-hint
{
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}

.Twitter-typeahead .hint-small
{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.Twitter-typeahead .hint-large
{
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

input-small/input-largeのスクリプト

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

更新されたjsfiddle： http://jsfiddle.net/KrtB5/542/

58
Nick P

うーん、それは.form-controlはBootstrap 3 RCの新しいクラスであり、この問題の原因です（疑いなく、これは多くの問題があるRCバージョンのみです）、そのクラスのスタイルを.tt-hintクラス。そう：

.Twitter-typeahead .tt-hint {
    display: block;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
}

作業フィドル： http://jsfiddle.net/KrtB5/2/

UpdatejQuery 1.9.1およびBootstrap 3.0.0： http：// jsfiddle.net/KrtB5/1

16
Hieu Nguyen

これをチェックしてください：

$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');
14
Andreas

Bootstrap 2 typeaheadプラグインの非公式の移植版もあります：

Bootstrap 3 Typeahead

Bootstrap 3 Typeahead

追加のCSSは必要なく、最新バージョンのBootstrapで動作します。

これがPlunkerの デモ です。

7
Paolo Moretti

.tt-hintだけでなく、他のcssクラスもブロックされます。

すべてのブラウザーで機能する最適なソリューションは、追加のcssを追加することです。これにより、Typeahead.jsとBootstrap 3の間のcss問題が修復されます。

https://github.com/jharding/typeahead.js-bootstrap.css

4
optimister

Bootstrap.lessを使用している場合は、はるかに簡単です。 BS 3はLESS 1.4.1をインストールしますが、これには「拡張」機能が含まれています。 Less and Bootstrap：span3（またはspanX [any number]）クラスをmixinとして使用する方法 を参照してください。

Extendは、LESSのキラー機能です。これで、クラスを完全に（明示的に名前を付けて）継承できます。したがって、Hieu NguyenとNick PのCSS回答のようにプロパティをコピーする必要はありません。 LESSは次の機能をすべて備えています。

.Twitter-typeahead .tt-hint:extend(.form-control all)
{}

https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less より少ないコードがBS 3で壊れています。また、BS 2の先行入力のように、ドロップダウンをWordでラップしないように追加しました。私の最後の以下のファイルは次のとおりです。

.tt-dropdown-menu
{
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    /* from BS dropdowns.less .dropdown-menu */
    /* background-color: @dropdownBackground;*/
    background-color: @dropdown-bg;

    /* 
    border: 1px solid #ccc;
    border: 1px solid @dropdownBorder;
    border: 1px solid @dropdownBorder;*/
    border: 1px solid @dropdown-fallback-border; // IE8 fallback
    border: 1px solid @dropdown-border;

    *border-right-width: 2px;
    *border-bottom-width: 2px;

    /*BS2 replaced with BS dropdowns.less .dropdown-menu*/
    /*.border-radius(6px);*/
    border-radius: 6px;

    /*.box-shadow(0 5px 10px rgba(0,0,0,.2));
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;*/
    .box-shadow(0 6px 12px rgba(0,0,0,.175));

    background-clip: padding-box;

}

.tt-suggestion
{
    display: block;
    padding: 3px 20px;
}

    .tt-suggestion.tt-is-under-cursor
    {
        /*color: @dropdownLinkColorHover;
        #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/
        color: @dropdown-link-hover-color;
        background-color: @dropdown-link-hover-bg;
    }

        .tt-suggestion.tt-is-under-cursor a
        {
            /*color: @dropdownBackground;*/
            color: @dropdown-bg;
        }

    .tt-suggestion > p
    {
        margin: 0;
        white-space: nowrap !important;     //dont conform suggestion to parent input width
    }


/*https://stackoverflow.com/questions/18059161/css-issue-on-Twitter-typeahead-with-bootstrap-3*/
.Twitter-typeahead
{
    display: block;
    width: 100%; //BS 3 needs this to inherit this for children
}

.Twitter-typeahead .tt-hint:extend(.form-control all)
{
    color: @input-color-placeholder; //show hint distinct from input
}
4
RockResolve

包括的なソリューション（これで推奨 バグレポート Typeaheadで）

https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

/*
 * typehead.js-bootstrap3.less
 * @version 0.2.3
 * https://github.com/hyspace/typeahead.js-bootstrap3.less
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
.has-warning .Twitter-typeahead .tt-input,
.has-warning .Twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .Twitter-typeahead .tt-input:focus,
.has-warning .Twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .Twitter-typeahead .tt-input,
.has-error .Twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .Twitter-typeahead .tt-input:focus,
.has-error .Twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .Twitter-typeahead .tt-input,
.has-success .Twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .Twitter-typeahead .tt-input:focus,
.has-success .Twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .Twitter-typeahead:first-child .tt-input,
.input-group .Twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .Twitter-typeahead:last-child .tt-input,
.input-group .Twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.input-group.input-group-sm .Twitter-typeahead .tt-input,
.input-group.input-group-sm .Twitter-typeahead .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group.input-group-sm .Twitter-typeahead .tt-input,
select.input-group.input-group-sm .Twitter-typeahead .tt-hint {
  height: 30px;
  line-height: 30px;
}
textarea.input-group.input-group-sm .Twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .Twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .Twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .Twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-sm .Twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .Twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-sm .Twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .Twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-sm .Twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .Twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.input-group.input-group-lg .Twitter-typeahead .tt-input,
.input-group.input-group-lg .Twitter-typeahead .tt-hint {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
select.input-group.input-group-lg .Twitter-typeahead .tt-input,
select.input-group.input-group-lg .Twitter-typeahead .tt-hint {
  height: 46px;
  line-height: 46px;
}
textarea.input-group.input-group-lg .Twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .Twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .Twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .Twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-lg .Twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .Twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-lg .Twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .Twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-lg .Twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .Twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.Twitter-typeahead {
  width: 100%;
}
.input-group .Twitter-typeahead {
  display: table-cell !important;
  float: left;
}
.Twitter-typeahead .tt-hint {
  color: #999999;
}
.Twitter-typeahead .tt-input {
  z-index: 2;
}
.Twitter-typeahead .tt-input[disabled],
.Twitter-typeahead .tt-input[readonly],
fieldset[disabled] .Twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
}
.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #f5f5f5;
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
  margin: 0;
}
3
user

アンドレアスの回答に基づいて、lessを使用して次のことに賭けます。

.tt-hint { 
   .form-control;
}
1
Gonzalo Muro

これは私のために働いた。あなたはそれを正しくするために上と左の数字で遊ぶ必要があるかもしれません。

$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');
1
Pramod Shivale

Bootstrap 3.0 RC1でのTypeaheadの問題 ：[laurent-wartel] [2]で述べたように https://github.com/hyspace/typeahead.js -bootstrap3.less または https://github.com/bassjobsen/Bootstrap-3-Typeahead typeahead.jsでBootstrap 3.1.0を使用するための追加のCSS.

または、新しいBloodhound提案エンジンで「古い」（TB 2）プラグインを使用します： https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

0
Bass Jobsen

よりクリーンなソリューション

.tt-small {

    .Twitter-typeahead {

        display: block !important; // Note: Override inline styles set by JavaScript

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

マークアップは次のようになります。

<div class="form-group">
    <label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label>
    <div class="col-lg-6 col-sm-6 tt-mydropdown tt-small">
        <input class="form-control" id="mydropdown" placeholder="Dropdown" type="text">
    </div> <!-- tt-small end -->
</div>
0
Dylan Madisetti

私が思いついた解決策は、別のCSSクラス（from-group-lg）をform-group要素に単純に追加することでした。

私のHTML：

<div class="form-group form-group-lg">
  <label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
  <input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>

私のscssファイルに追加したもの：

.form-group-lg .tt-hint
{
    @extend .input-lg;
}
0
totas

これらの複雑な実装を経由する必要はなく、追加するだけです

style="position: relative"

親要素に。絶対位置を使用しているため、参照している「絶対」を知る必要があります。

0
Kirk Strobeck

Twitter TypeaheadをBootstrap 3。

// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead.
// We need to do this because, if not, styles on our stylesheets won't be able to
// override those inline styles.
$('.Twitter-typeahead, .typeahead').attr('style','');

次に、LESSスタイルシートで、次を追加できます。

// Twitter Typeahead

.Twitter-typeahead {
  position: relative;

  .tt-hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: @input-bg;
    border: none;
  }

  .tt-input {
    position: relative;
    vertical-align: top;
  }

  .tt-hint + .tt-input {
    background-color: transparent;
  }

  .tt-dropdown-menu {
    &:extend(.dropdown-menu all);
  }

  .tt-suggestion {
    &:extend(.dropdown-menu > li > a all);
    p {
      margin-bottom: 0;
    }
  }

  .tt-cursor {
    &:extend(.dropdown-menu > .active > a all);
  }

}
0
Julián Landerreche