UI Bootstrap Popover: changer la largeur

Je suis en train d'utiliser les popovers à partir de l'UI Bootstrap dans AngularJS:
http://angular-ui.github.io/bootstrap/#/popover

<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

Il me donne une liste comme ceci:

UI Bootstrap Popover: changer la largeur

Comment puis-je les changements de style de la largeur de cette liste?

source d'informationauteur dhrm

  1. 16

    Vous pouvez l'atteindre en substituant la liste de contenu de classe:

    .popover-content {
width: 200px;
}

    Mise à JOUR:
    Vous pouvez le vérifier dans google Chrome:
    - appuyez sur la touche F12
    - sélectionnez la loupe
    - cliquez sur l'élément à inspecter
    - modifier son style
    UI Bootstrap Popover: changer la largeur

  2. 23

    De la docs vous pouvez utiliser le

    popover-class l'attribut classe Personnalisée pour être appliqué à la liste

    <i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

    Dans votre feuille de style

    .increase-popover-width {
   max-width: 400px;
}

    La raison pour mettre max-width au lieu de width est que bootstrap a popover-max-width définir comme 276px.

    github le code de démarrage

  3. 5

    Une autre solution, si vous avez très large popovers est de leur permettre d'autosize

    Il suffit de régler votre css comme cela

    .popover {
    max-width: 800px; /* optional max width */
    width: intrinsic; /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
}
  4. 4

    Pour moi qui suit travaillé

    .popover {
    max-width: 450px;
}

    Ce fait modifié la taille de la fenêtre pop-over blanc conteneur.

  5. 1

    Avez-vous essayé le liste-ajouter-à-corps attribut de la liste composant?

  6. 0

    La largeur peut être facilement modifié par substitution de la .popover:

    .popover {
    width: 200px;
}