Javascript Girl
  1. Javascript Girl
  3. Typeahead.js interfère avec les groupes d'entrée Bootstrap
Intereting Posts
Modèle partiel en trait de soulignement (tout comme dans le guidon)? Twisted a-t-il différé le même qu'une promesse en JavaScript? Erreur Firefox 'aucun élément trouvé' La façon la plus concise de faire un remplacement de texte sur une page Web? (En utilisant GreaseMonkey) Utilisez l'attribut readonly dans <input> sans changer le curseur Ordre de script pour jquery avec bootstrap Comment obtenir l'accèsToken pour Firebase 3 en utilisant javascript Pousser un élément attribué multiple à un tableau JAVASCRIPT Comment créer une application Web sans installation, côté client, base de données Différence entre le contenu du texte et le texte intérieur Comment exécuter un code jQuery après avoir chargé toutes les images de ma page? Backbone model.save () envoie PUT au lieu de POST Génère csv à partir de mvc web api httpresponse et recevez-le par angularjs pour téléchargement Quelle est la sécurité pour supposer que la plupart des utilisateurs auront JS activé? Puis-je instancier une superclasse et avoir une sous-classe particulière être instanciée en fonction des paramètres fournis

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

Comment puis-je garder Typeahead.js diviser mes groupes de saisie Twitter Bootstrap 3? Chaque fois que je pointe le javascript Typeahead dans une zone de texte faisant partie d'un groupe d'entrée, la zone de texte jointe et le bouton de soumettre cessent d'être joints. Est-ce que c'est juste un bug dans Typeahead, ou existe-t-il une solution pour cela?

Sans chargement Typeahead.JS:

Entrez la description de l'image ici

Avec Typeahead.JS:

Entrez la description de l'image ici

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>

C'est 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>

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

Le seul problème exceptionnel est lorsque j'applique un effet d'ombre à la fois le .btn et le contrôle .form. L'ombre est également dessinée entre le champ de saisie et le bouton.

Entrez la description de l'image ici

 .twitter-typeahead {float: left;  Largeur: 100%}

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

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

peut être?

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