2013-10-17 6 views
1

J'essaie d'afficher un survol dans un modal Twitter Bootstrap comme un moyen d'afficher des conseils dans un formulaire. À première vue, tout semble fonctionner correctement; Cependant, en regardant de plus près, je trouve que peu importe ce que je mets dans le popover, le conteneur se réduit à sa largeur minimale possible - même s'il y a suffisamment d'espace pour qu'il puisse s'étendre en une ligne.Popover rétrécissant sur un Twitter Bootstrap 3 modal

Vous pouvez voir le phénomène dans cette capture d'écran:

The problem

(Vous pouvez essayer ici: http://jsfiddle.net/swBYA/ - cliquez sur le grand bouton pour afficher le modal, puis sur l'entrée pour montrer la popover

Si vous inspectez l'élément popover, vous verrez qu'il n'a pas de largeur fixe et que son max-width dépasse sa largeur réelle calculée.

Modifier le width du composant et le définir sur un nombre fixe change la largeur comme prévu, mais n'est pas propre, car certains popovers deviendront inutilement gros.

La définition de white-space à nowrap fait que le conteneur se développe pour s'adapter à son contenu comme prévu, mais cela casse bien sûr le max-width. La modification du position du conteneur de absolute à relative fait que le conteneur se comporte comme prévu, mais l'alignement est perturbé. Je pense que ceci suggère que le fait qu'il soit positionné de manière absolue tout en étant un enfant de l'élément modal doit l'affecter d'une manière ou d'une autre.

Pourquoi cela se produit-il? Comment puis-je le réparer afin que le conteneur Popover se développe pour s'adapter à son contenu, tout en honorant le max-width? Merci d'avance :)

Répondre

1

.popover.right { margin-right:-276px; } 
+0

.popover {margin-right: -276px; } a travaillé pour moi. –

Questions connexes