Changer la largeur de Bootstrap popover

Question

Je conçois une page en utilisant Bootstrap 3. J'essaie d'utiliser une info-bulle avec placement: right sur un élément d'entrée. Le nouveau Bootstrap garantit que si vous utilisez form-control, vous avez essentiellement un élément d'entrée en pleine largeur.

Le code HTML ressemble à ceci:

        Nom:

La largeur des info-bulles est trop faible, à mon avis, car il n'y a plus de place dans la div. Je veux que le formulaire d'entrée soit à gauche, et une info-bulle large à droite.

En gros, je cherche une solution où je n'ai pas à outrepasser Bootstrap.

Le JsFiddle est attaché. La deuxième option d'entrée. N'ai pas beaucoup utilisé jsfiddle donc je ne sais pas, mais essayez d'augmenter la taille de la boîte de sortie pour voir les résultats, sur les écrans plus petits vous ne le verriez même pas. http://jsfiddle.net/Rqx8T/

Answer 1

Pas de solution finale ici :/ Juste quelques réflexions sur la façon de résoudre ce problème de manière "propre"...

Version mise à jour (jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-" à la place de class="col-md-") de votre JSFiddle original : http://jsfiddle.net/tkrotoff/N99h7/

Maintenant le même JSFiddle avec votre solution proposée : http://jsfiddle.net/tkrotoff/N99h7/8/
Ça ne fonctionne pas : le popover est positionné par rapport au

+ imaginez que vous ayez plusieurs entrées pour le même

...

Donc si nous voulons garder le popover sur les entrées (meilleur au niveau sémantique) :

• .popover { position: fixed; } : mais alors à chaque fois que vous faites défiler la page, le popover ne suivra pas le défilement

• .popover { width: 100%; } : pas si bon puisque vous dépendez toujours de la largeur parente (c'est-à-dire

• .popover-content { white-space: nowrap; } : bon seulement si le texte à l'intérieur du popover est plus court que max-width

Consultez http://jsfiddle.net/tkrotoff/N99h7/11/

Peut-être qu'en utilisant des navigateurs très récents, les nouvelles valeurs de largeur CSS peuvent résoudre le problème, je n'ai pas essayé.

Answer 2

container : 'body' en général fait l'affaire (voir la réponse de JustAnil ci-dessus), mais il y a un problème si votre popover est dans une modal. Le z-index le place derrière la modal lorsque le popover est attaché à body. Cela semble être lié à BS2 issue 5014, mais je l'obtiens sur la version 3.1.1. Vous n'êtes pas censé utiliser un container de body, mais si vous corrigez le code comme suit :

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

alors vous corrigez le problème de z-index, mais la largeur du popover est toujours incorrecte.

La seule solution que je trouve est d'utiliser container : 'body' et d'ajouter un peu de css supplémentaire :

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Remarquez que les solutions css seules ne fonctionneront pas.

Answer 3

Une solution testée pour Bootstrap 4 beta:

.popover {
        min-width: 30em !important;
    }

Ensemble avec l'instruction jQuery:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

Note annexe, data-container="body" ou container: "body" dans le HTML ou en tant qu'option à l'objet popover({}) n'ont pas vraiment fonctionné [peut-être qu'ils fonctionnent mais seulement en conjonction avec l'instruction CSS];

De plus, rappelez-vous que Bootstrap 4 beta s'appuie sur popper.js pour le positionnement de ses popovers et tooltips (avant cela, c'était tether.js)

Answer 4

Vous pouvez également ajouter le data-container="body" qui devrait faire l'affaire :

        Nom:

Answer 5

Vous pouvez ajuster la largeur de la fenêtre contextuelle avec les méthodes indiquées ci-dessus, mais la meilleure chose à faire est de définir la largeur du contenu avant que Bootstrap ne la voie et ne fasse ses calculs. Par exemple, j'avais une table, j'ai défini sa largeur, puis Bootstrap a créé une fenêtre contextuelle pour l'adapter. (Parfois Bootstrap a du mal à déterminer la largeur, et vous devez intervenir et lui donner un coup de main)