web-dev-qa-db-fra.com

Changer la largeur de Bootstrap Popover

Je conçois une page à l'aide de Bootstrap 3. J'essaie d'utiliser un popover 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 pleine largeur.

Le code HTML ressemble à ceci: 

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

La largeur des popovers est trop faible, à mon avis, car il ne leur reste plus aucune largeur dans la division .. Je veux le formulaire de saisie du côté gauche et un large popover du côté droit.

La plupart du temps, je recherche une solution qui évite de remplacer Bootstrap. 

Le JsFiddle attaché. La deuxième option de saisie. Je n'ai pas beaucoup utilisé jsfiddle, alors je ne sais pas, mais essayez d'augmenter la taille de la boîte de sortie pour afficher les résultats. Sur des écrans plus petits, vous ne la verrez même pas . http://jsfiddle.net/Rqx8T/

csstwitter-bootstraptwitter-bootstrap-3popover
169
mayankbatra
<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Fondamentalement, j'ai mis le code popover dans la ligne div, au lieu de l'entrée div. Résolu le problème.

6
mayankbatra

Augmenter la largeur avec CSS

Vous pouvez utiliser CSS pour augmenter la largeur de votre popover, comme ceci:

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Si cela ne fonctionne pas, vous voulez probablement la solution ci-dessous et modifiez votre élément container. ( Voir le JSFiddle )

Conteneur d'amorçage Twitter

Si cela ne fonctionne pas, vous devrez probablement spécifier le conteneur:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

Plus d'informations

Twitter Bootstrap popover increase width

Le popover est contenu dans l'élément dans lequel il est déclenché. Pour l'étendre "pleine largeur" ​​- spécifiez le conteneur

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

Regardez le JSFiddle pour l'essayer.

JSFiddle: http://jsfiddle.net/xp1369g4/

311
Anil

J'avais aussi besoin d'un popover plus large pour un champ de texte de recherche. Je suis venu avec cette solution Javascript (ici dans Coffee ):

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

La solution de contournement est dans la dernière ligne. Avant que le popover ne soit affiché, l'option max-width est définie sur une valeur personnalisée. Vous pouvez également ajouter une classe personnalisée à l'élément tip.

37
2called-chaos

J'ai eu le même problème. J'ai passé pas mal de temps à chercher une réponse et à trouver ma propre solution: Ajouter le texte suivant en tête:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>
29
Aleksey Shafransky

Pour changer la largeur, vous pouvez utiliser css

Pour une taille fixe voulue

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

Pour la largeur maximale souhaitée:

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

jsfiddle: http://jsfiddle.net/Rqx8T/2/

27
Pimento Web

Pour changer la largeur du popover, vous pouvez remplacer le modèle:

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})
17
tyczo

Avec l'aide de ce que @EML a décrit ci-dessus concernant le popover sur les fenêtres modales et le code affiché par @ 2called-chaos, voici comment j'ai résolu le problème.

J'ai une icône sur le modal qui, lorsqu'on clique dessus, devrait apparaître dans le popup

Mon HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

Mon script

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
6
ajitweb

Pas de solution finale ici:/Juste quelques idées pour résoudre ce problème "proprement" ...

Version mise à jour (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" au lieu de class = "col-md-") de votre JSFiddle d'origine: http://jsfiddle.net/tkrotoff/N99h7/

Maintenant, le même JSFiddle avec votre solution proposée : http://jsfiddle.net/tkrotoff/N99h7/8/
Cela ne fonctionne pas: le popover est positionné par rapport au <div class="col-*"> + imaginons que vous avez plusieurs entrées pour le même <div class="col-*">...

Donc, si nous voulons garder le popover sur les entrées (sémantiquement mieux):

  • .popover { position: fixed; }: mais chaque fois que vous faites défiler la page, le popover ne suivra pas le défilement
  • .popover { width: 100%; }: pas très bon puisque vous dépendez toujours de la largeur du parent (i.e <div class="col-*">
  • .popover-content { white-space: nowrap; }: bon seulement si le texte à l'intérieur du popover est plus court que max-width

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

Avec des navigateurs très récents, les nouvelles valeurs de largeur CSS peuvent peut-être résoudre le problème. Je n'ai pas essayé.

4
tanguy_k

container: 'body' fait normalement l'affaire (voir la réponse de JustAnil ci-dessus), mais il existe un problème si votre popover est en mode modal. Le z-index le place derrière le modal lorsque le popover est attaché à body. Cela semble être lié à BS2 numéro 5014 , mais je l’ai sous 3.1.1. Vous n'êtes pas censé utiliser une container de body, mais si vous corrigez le code à 

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

vous résolvez ensuite le problème z-index, mais la largeur de popover est toujours incorrecte.

Le seul correctif que je peux trouver est d'utiliser container: 'body' et d'ajouter des CSS supplémentaires:

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

Notez que les solutions CSS ne fonctionneront pas toutes seules.

4
EML

Voici le moyen de le faire sans-café avec survol:

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});
3
Abram

Vous pouvez utiliser attribut data-container = "body" dans popover

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>
3
Nayan Hodar

Vous pouvez ajuster la largeur du popover 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 voit et ne fasse son calcul. 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

Pour ceux qui préfèrent la solution JavaScript . Dans Bootstrap 4 tip () est devenu getTipElement () et renvoie un objet no jQuery. Donc, pour changer la largeur du popover dans Bootstrap 4, vous pouvez utiliser:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});
2
Dirceu

vous pouvez également ajouter le conteneur de données = "body" qui devrait faire le travail: 

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>
1
treize
 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

Je finis par mettre la largeur de "popover-content" sur le nombre que je veux. (Les autres identifiants ou la classe ne fonctionneront pas .....) Bonne chance! 

  #popover-content{
      width: 600px;

  }
1
CincyBella

Je l'ai utilisé (fonctionne bien):

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

Une solution testée pour Bootstrap 4 beta:

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

En même temps que l'instruction jQuery:

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

La note latérale, data-container="body" ou container: "body" au format HTML ou comme une variable option à l'objet popover({}) n'a pas vraiment fonctionné [peut-être que le travail fonctionne mais uniquement avec l'instruction CSS];

De plus, rappelez-vous que Bootstrap 4 beta repose sur popper.js pour son positionnement dans la popover et les info-bulles (auparavant, c’était tether.js)

0
vzR

Pour un composant TypeScript:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :Host >>> .popover {
          max-width: 100%;
        }
    `]
})
0
Joshua