web-dev-qa-db-fra.com

Typeahead.js interfère avec les groupes d'entrée Bootstrap

Comment empêcher Typeahead.js de diviser mes groupes d'entrées Twitter Bootstrap 3? Chaque fois que je pointe le code Javascript Typeahead sur une zone de texte faisant partie d'un groupe de saisie, la zone de texte jointe et le bouton d'envoi ne sont plus joints. Est-ce que c'est quelque chose qui n'est qu'un bogue dans Typeahead, ou existe-t-il une solution de contournement pour cela?

Sans charger Typeahead.JS:

enter image description here

Avec Typeahead.JS:

enter image description here

Mon HTML original:

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

Voici ce que Typeahead fait à ce 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
23
schnauss

Ce projet a partiellement résolu le problème pour moi: https://github.com/hyspace/typeahead.js-bootstrap3.less

Le seul problème en suspens concerne le fait que lorsque j'applique un effet d'ombre aux contrôles .btn et .form, l'ombre est également dessinée entre le champ de saisie et le bouton. 

enter image description here

12
daniel.sedlacek
. Twitter-typeahead {float: left; largeur: 100%}
28
Mahesh

peut être?

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

2
Robin Gomez

Cela corrige le problème lorsque le côté gauche de la zone de texte est carré (non arrondi):

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

Solution Bootstrap v4:

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