web-dev-qa-db-fra.com

Problème CSS sur Twitter Typeahead avec Bootstrap 3

Avec la sortie de Bootstrap 3. Typeahead a été supprimé en faveur de ceci:
https://github.com/Twitter/typeahead.js

Je l'ai intégré avec succès à la récupération de données à distance

mais j'ai des problèmes avec l'auto-complétion

enter image description here

comme vous pouvez le voir, deux textes apparaissent dans la zone de texte.

J'ai inclus le css ( https://github.com/jharding/typeahead.js-bootstrap.css ) comme indiqué dans la documentation, mais pas de chance.

toute aide ou suggestion serait appréciée.

jsfiddle montrant le problème:
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: mis à jour pour Bootstrap 3.0EDIT 2: l'appel de type a été modifié. Voir le nouveau jsfiddle

Après avoir joué avec le style, il semble que la classe de contrôle de formulaire ne s'aligne pas vraiment avec le tt-hint. Alors je me suis assuré que les marges et les frontières s'alignent. Reprenant la réponse de Hieu Nguyen et en ajoutant border-radius et support pour 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;
}

Script pour input-small/input-large

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

Mise à jour de jsfiddle: http://jsfiddle.net/KrtB5/542/

58
Nick P

Hmm, on dirait que .form-control est une nouvelle classe dans Bootstrap 3 RC et qu’il est responsable de ce problème (il ne fait aucun doute que c’est uniquement la version RC qui comporte de nombreux problèmes), vous pouvez simplement copier le style de cette classe dans .tt-hint Alors:

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

Violon de travail: http://jsfiddle.net/KrtB5/2/

Update qui fonctionne mieux avec jQuery 1.9.1 et Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13

16
Hieu Nguyen

Regarde ça:

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

Il y a aussi un port non officiel du plugin Bootstrap 2 typeahead:

Typstead Bootstrap 3

Bootstrap 3 Typeahead

Il ne nécessite pas de CSS supplémentaire et fonctionne avec la dernière version de Bootstrap.

Voici un demo sur Plunker.

7
Paolo Moretti

Non seulement .tt-hint est brocken, mais aussi d'autres classes css.

La meilleure solution, fonctionnant dans tous les navigateurs, consiste à ajouter le css supplémentaire, qui répare les problèmes css entre Typeahead.js et Bootstrap 3:

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

4
optimister

Si vous utilisez bootstrap.less, vous avez beaucoup plus facile. BS 3 installe LESS 1.4.1, qui inclut désormais la fonctionnalité 'extend'. voir Less et Bootstrap: comment utiliser une classe span3 (ou spanX [n'importe quel nombre]) comme mixin?

Extend est une fonctionnalité qui tue pour MOINS maintenant. Vous pouvez maintenant entièrement hériter des classes (nommés explicitement) . Il n'est donc pas nécessaire de copier des propriétés comme dans les réponses CSS de Hieu Nguyen et Nick P. MOINS fera tout avec:

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

Le https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less moins de code est cassé pour BS 3. Je l'ai utilisé comme point de départ, et également ajouté en faisant la liste déroulante pas Word Wrap selon la tête de caractères BS 2. Mon dernier fichier moins est:

.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

Une solution complète (recommandée dans ce rapport de bogue chez 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

Basé sur la réponse d'Andreas, je parierais pour les suivants en utilisant moins:

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

Cela a fonctionné pour moi. Vous devrez peut-être jouer avec les chiffres du haut et de gauche pour réussir.

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

De Typeahead avec Bootstrap 3.0 RC1 : Comme mentionné par [laurent-wartel] [2], essayez https://github.com/hyspace/typeahead.js-bootstrap3.less ou https://github.com/bassjobsen/Bootstrap-3-Typeahead pour obtenir du CSS supplémentaire qui utilise typeahead.js avec Bootstrap 3.1.0.

Ou utilisez le "vieux" plug-in (TB 2) avec le nouveau moteur de suggestion Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

0
Bass Jobsen

Un nettoyeur moins de solution

.tt-small {

    .Twitter-typeahead {

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

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

Où le balisage ressemble à quelque chose comme:

<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

La solution que j'ai proposée consistait simplement à ajouter une autre classe CSS (from-group-lg) à mon élément form-group.

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

Dans mon fichier scss j'ai ajouté:

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

Nul besoin de passer par l’une de ces implémentations compliquées, il suffit d’ajouter 

style="position: relative"

À l'élément parent. Pour utiliser le positionnement absolu, il suffit de savoir à quel «absolu» vous faites référence.

0
Kirk Strobeck

Une autre approche pour que Twitter Typeahead fonctionne avec 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','');

Ensuite, dans votre feuille de style MOINS, vous pouvez ajouter les éléments suivants:

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