web-dev-qa-db-fra.com

Changer la largeur du popover bootstrap de Twitter

J'essaye de changer la largeur de Twitter bootstrap popover en utilisant bootstrap 3: 

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

$('#popover').popover(options)

Pour le moment, le contenu du popover s'étend sur deux lignes. Je veux que le contenu popover reste sur une seule ligne. Est-ce possible? 

J'utilise C #, HTML et CSS.

htmlcsstwitter-bootstrappopover
40
user3395822

Vous pouvez changer les dimensions du popover avec CSS:

.popover{
    width:200px;
    height:250px;    
}

Mais ce CSS va changer TOUTES les popovers. Ce que vous devez faire, c'est placer le bouton dans un élément conteneur et utiliser CSS comme ceci:

#containerElem .popover {
  width:200px;
  height:250px;
  max-width:none; // Required for popovers wider than 276px (Bootstrap's max-width for popovers)
}

Vous devez également modifier data-container="#containerElem" pour correspondre à votre conteneur.

REMARQUE: Si la largeur de votre popover doit être supérieure à 276 px, vous devez également remplacer la propriété max-width. Ajoutez donc max-width: none à la classe .popover {}.

Voici un jsFiddle: http://jsfiddle.net/4FMmA/

76
Gavin

Si vous voulez contrôler la largeur en javascript:

HTML (exemple de Bootstrap)

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

Javascript:

Nous définissons la largeur maximale lorsque l'événement show.bs.popover est déclenché:

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

http://jsfiddle.net/ctoesca/u3kSk

  • Vous pouvez également ajouter un attribut data-max-width sur l'élément button et obtenir la valeur dans la fonction de déclenchement:

p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});
17
c-toesca
.popover{
    max-width: 100%;
    width: <width>;
}

La largeur maximale de la largeur de la page est définie par la largeur maximale de la page

12
sunnyiitkgp

Utilisez ce code. Cela fonctionnera bien:

  .popover{
       background-color:#b94a48;
       border:none;
       border-radius:unset;
       min-width:100px;
       width:100%;
       max-width:400px;
       overflow-wrap:break-Word;
    }
2
Bimal Das

Vous pouvez ajuster la largeur du popover, mais la meilleure chose à faire est de définir la largeur du contenu avant que Bootstrap ne le voit. Par exemple, j'avais une table, je définissais sa largeur, puis bootstrap construisait un popover à sa convenance. (Parfois, Bootstrap a du mal à déterminer la largeur, et vous devez intervenir et tenir sa main)

2
CloudMagick

Je pourrais avoir une solution plus facile:

Ajoutez la classe css suivante: 

.app-popover-fw { width: 276px; } </ code>

Utilisez le template suivant pour votre popover

var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover">' +
                             '<div class="arrow"></div>'+ 
                             '<h3 class="popover-title"></h3>'+
                             '<div class="popover-content"></div>'+
                          '</div>';

$('#example').popover({template: newPopoverTemplate });`

Travailler du violon: http://jsfiddle.net/b5Ly2ynd/

NB: Comme d'autres l'ont dit, il existe une propriété "max-width" sur bs popovers. Vous devez modifier celui-ci si vous voulez que votre popover dépasse 276 pixels.

2
Xavier13

J'ai utilisé le code suivant:

.popover {
      width: 600px;
      max-width: 600px;
      font-size: 13px;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
      Word-break: break-all;
      Word-wrap: break-Word;
      white-space: pre;
      width: 600px;
    }
1
superlogical

Une autre option consiste à utiliser un modèle personnalisé comme (ajouté uniquement à la classe supplémentaire: popover-lg):

<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

Puis en css:

.popover-lg {
    max-width: 100%;
}

Invocation:

$(".your-element")..popover({
        trigger: "hover",
        template: templateString,
        container: "body",
        content: '...',
    });

De cette façon, il est propre et n’interfère pas avec le comportement initial du bootstrap. 

1
Marcin

Vous pouvez y parvenir de deux manières, l'une en réduisant la taille de la police pour la classe 'popover' et l'autre en réduisant le remplissage de la classe 'popover-content'. Voici comment je l'ai réalisé, 

.popover {
  font-size: 12px;
}

.popover-content {
  padding: 5px 5px;
}
0
Harsha Rastogi

Vous pouvez utiliser CSS pour augmenter la largeur de votre popover.

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
0
Asiri Jayaweera