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

::ng-deep .popover{
    max-width: 600px !important; 
}

cela fonctionne bien pour moi "Angular 14"

Answer 2

Pour un composant typescript :

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

Answer 3

Dans Angular ng-bootstrap, vous pouvez simplement ajouter container="body" au contrôle qui déclenche la popover (comme un bouton ou une zone de texte). Ensuite, dans votre fichier de style global (style.css ou style.scss), vous devez ajouter .popover { max-width: 100% !important; }. Après cela, le contenu de la popover se mettra automatiquement à la largeur de son contenu.

Answer 4

Dans Bootstrap 4, vous pouvez simplement remplacer la valeur par défaut de la variable Bootstrap $popover-max-width dans votre fichier styles.scss comme ceci :

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

Plus sur le remplacement des valeurs par défaut de bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Answer 5

Essayez ceci :

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("chaîne"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));