Ändern der Breite des Bootstrap-Popovers

192

Ich entwerfe eine Seite mit Bootstrap 3. Ich versuche, ein Popover mit placement: righteinem Eingabeelement zu verwenden. Der neue Bootstrap stellt sicher, dass Sie bei Verwendung form-controlgrundsätzlich ein Eingabeelement in voller Breite haben.

Der HTML-Code sieht ungefähr so ​​aus:

<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>

Die Popover-Breite ist meiner Meinung nach zu gering, da im div keine Breite mehr vorhanden ist. Ich möchte das Eingabeformular auf der linken Seite und ein breites Popover auf der rechten Seite.

Meistens suche ich nach einer Lösung, bei der ich Bootstrap nicht überschreiben muss.

Die angehängte JsFiddle. Die zweite Eingabemöglichkeit. Ich habe jsfiddle nicht oft verwendet, weiß es also nicht, aber versuche, das Ausgabefeld zu vergrößern, um Ergebnisse zu sehen. Auf kleineren Bildschirmen wird es nicht einmal angezeigt. http://jsfiddle.net/Rqx8T/

Mayankbatra
quelle

Antworten:

343

Erhöhen Sie die Breite mit CSS

Sie können CSS verwenden, um die Breite Ihres Popovers wie folgt zu erhöhen:

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

Wenn dies nicht funktioniert, möchten Sie wahrscheinlich die folgende Lösung und ändern Sie Ihr containerElement. ( Sehen Sie sich die JSFiddle an )


Twitter Bootstrap Container

Wenn das nicht funktioniert, müssen Sie wahrscheinlich den Container angeben:

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

Mehr Info

Twitter Bootstrap Popover vergrößert die Breite

Das Popover ist in dem Element enthalten, in dem es ausgelöst wird. Um es auf "volle Breite" zu erweitern, geben Sie den Container an:

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

JSFiddle

Sehen Sie sich die JSFiddle an, um sie auszuprobieren.

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

Anil
quelle
1
+1, funktioniert aber möglicherweise nicht, wenn sich Ihr Popover in einem Modal befindet: siehe meine Antwort unten.
EML
2
Die Antwort oben war TLDR für mich, enthielt aber dieses geniale Snippet, das sowohl die Breite als auch das Problem der Erfassung aller Popovers löste:$('[data-toggle="popover"]').popover({ container: 'body' });
Gregory Cosmo Haun
2
Ich musste hinzufügen!important
Peter Ehrlich
Sie können das Attribut "Ordentlicheres Daten" verwenden: data-container="body"für das Element
Stephen
@ surfer190 Ordentlicher pro Popover, aber Unordnung, wenn Sie möchten, dass jedes Popover vorhanden ist container: "body".
Chris Cirefice
39

Ich brauchte auch ein breiteres Popover für ein Suchtextfeld. Ich habe mir diese Javascript-Lösung ausgedacht (hier in 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"))

Die Problemumgehung befindet sich in der letzten Zeile. Bevor das Popover angezeigt wird, wird die Option für die maximale Breite auf einen benutzerdefinierten Wert festgelegt. Sie können dem tip-Element auch eine benutzerdefinierte Klasse hinzufügen.

2called-Chaos
quelle
28
Wenn Sie kein Kaffeekenner sind, ist hier die gleiche letzte Zeile wie bei regulären js:.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
Colin
1
Was ist .tip ()? Warum .data () verwenden? XD Ich verstehe das nicht wirklich, aber es funktioniert! Ich mag diese Lösung besser als das Schreiben von neuem CSS, um die Standardeinstellung zu ersetzen max-width. Vielen Dank für diese Lösung! Übrigens habe "600px"ich es auf eingestellt "none". Es ist besser für mich.
Taufik Nur Rahmanda
36

Ich hatte das gleiche Problem. Ich habe einige Zeit auf der Suche nach einer Antwort verbracht und meine eigene Lösung gefunden: Fügen Sie dem Kopf folgenden Text hinzu:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>
Aleksey Shafransky
quelle
1
Möglicherweise müssen Sie! Important hinzufügen, um die Standardeinstellung für den Bootstrap zu überschreiben.
John Creamer
29

Um die Breite zu ändern, können Sie CSS verwenden

Für feste Größe gesucht

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

Für maximale Breite gewünscht:

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

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

BENARD Patrick
quelle
2
Dies würde zunächst die Popover-Breite auf der Website ändern. Aber habe eine Antwort gefunden. Mehr richtig eine Problemumgehung, jetzt veröffentlichen.
Mayankbatra
@ Peter, ich kann Ihr Problem nicht reproduzieren. Ich glaube, Sie haben gerade vergessen, Ihrer Eingabe eine Datenplatzierung hinzuzufügen ...
BENARD Patrick
@pbenard Ich habe das gleiche Problem, Ihre Lösung funktioniert zum Verringern der maximalen Breite als 276px. Wenn Sie jedoch versuchen, die maximale Breite stärker zu ändern, ändert sich dies nicht.
Hardik Patel
18

Um die Popover-Breite zu ändern, können Sie die Vorlage überschreiben:

$('#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>'
})
Tyczo
quelle
1
hat bei mir nicht funktioniert .. Ich musste auch max-width: 500pxden Stil ergänzen .
Cronfy
7

Für Leute, die die JavaScript-Lösung bevorzugen. In Bootstrap 4 wurde tip () zu getTipElement () und gibt ein no jQuery-Objekt zurück. Um die Breite des Popovers in Bootstrap 4 zu ändern, können Sie Folgendes verwenden:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});
Dirceu
quelle
Dies hat bei mir allerdings nur dann funktioniert, wenn Einstellungen widthnicht vorgenommen wurdenmax-width
Deano
6
<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>

Grundsätzlich setze ich den Popover-Code in die Zeile div, anstelle der Eingabe div. Problem gelöst.

Mayankbatra
quelle
hat bei mir nicht funktioniert. Ich hatte erwartet, dass es funktioniert :( Odd
t.durden
6

Mit Hilfe dessen, was @EML oben in Bezug auf Popover in modalen Fenstern beschrieben hat, und des Codes, der von @ 2called-Chaos angezeigt wird, habe ich das Problem auf diese Weise gelöst.

Ich habe ein Symbol auf dem Modal, das beim Klicken auf das Popup angezeigt wird

Mein 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>

Mein Skript

    $('[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"); });
Ajitweb
quelle
4

Keine endgültige Lösung hier: / Nur ein paar Gedanken, wie man dieses Problem "sauber" löst ...

Aktualisierte Version (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" anstelle von class = "col-md-") Ihrer ursprünglichen JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Jetzt das gleiche JSFiddle mit Ihrer vorgeschlagenen Lösung : http://jsfiddle.net/tkrotoff/N99h7/8/
Es funktioniert nicht: Das Popover ist relativ zum <div class="col-*">+ positioniert. Stellen Sie sich vor, Sie haben mehrere Eingänge für dasselbe<div class="col-*"> ...

Wenn wir also das Popover auf den Eingaben behalten möchten (semantisch besser):

  • .popover { position: fixed; }: aber jedes Mal, wenn Sie die Seite scrollen, folgt das Popover nicht dem Bildlauf
  • .popover { width: 100%; }: nicht so gut, da Sie immer noch von der übergeordneten Breite abhängen (dh <div class="col-*">
  • .popover-content { white-space: nowrap; }: Nur gut, wenn der Text im Popover kürzer als ist max-width

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

Vielleicht können die neuen CSS- Breitenwerte mit den neuesten Browsern das Problem lösen, ich habe es nicht versucht.

tanguy_k
quelle
4

container: 'body'Normalerweise macht er den Trick (siehe JustAnils Antwort oben), aber es gibt ein Problem, wenn sich Ihr Popover in einem Modal befindet. Das z-indexplatziert es hinter dem Modal, wenn das Popover angehängt ist body. Dies scheint mit BS2-Problem 5014 zu tun zu haben , aber ich bekomme es auf 3.1.1. Sie sind nicht ein zu verwenden , bedeutete containerder body, aber wenn Sie zu beheben , den Code zu

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

dann reparierst du das z-index Problem, aber die Popover-Breite ist immer noch falsch.

Die einzige Lösung, die ich finden kann, ist die Verwendung container: 'body'und das Hinzufügen von zusätzlichem CSS:

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

Beachten Sie, dass CSS-Lösungen allein nicht funktionieren.

EML
quelle
1
+1 ist ärgerlich, wenn das Popover hinter dem Modal erscheint. Ich bin auf dasselbe Problem mit der Angular-UI-Bootstrap-Direktive gestoßen, bei der ein Tooltip verwendet tooltip-append-to-bodywurde. Es wurde hinter dem modalen und dem modalen "ausgegrauten" Hintergrund angezeigt.
Daryn
4

Sie können das Attribut data-container = "body" im Popover verwenden

<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>
Nayan Hodar
quelle
4

Hier ist die Nicht-Coffeescript-Methode, um dies mit Hover zu tun:

$(".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"
    });
  });
});
Abram
quelle
3

Eine getestete Lösung für Bootstrap 4 Beta:

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

Zusammen mit der jQuery-Anweisung:

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

Randnotiz data-container="body"oder container: "body"entweder in HTML oder als optionzu dem popover({})Objekt hat nicht wirklich den Trick gemacht [vielleicht funktioniert das do, aber nur zusammen mit der CSS-Anweisung];

Denken Sie auch daran, dass Bootstrap 4 Beta für die Popover- und Tooltip-Positionierung auf popper.js basiert (zuvor war es tether.js).

vzR
quelle
2

Sie können die Breite des Popovers mit den oben angegebenen Methoden anpassen. Am besten definieren Sie jedoch die Breite des Inhalts, bevor Bootstrap sieht und berechnet. Zum Beispiel hatte ich eine Tabelle, ich definierte ihre Breite, dann baute Bootstrap ein Popover, um es anzupassen. (Manchmal hat Bootstrap Probleme, die Breite zu bestimmen, und Sie müssen einspringen und die Hand halten.)

CloudMagick
quelle
2

Ich habe das benutzt (funktioniert gut):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}
Bimal Das
quelle
2
 <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>

Am Ende setze ich die Breite von div "popover-content" auf die gewünschte Zahl. (andere IDs oder Klassen funktionieren nicht .....) Viel Glück!

  #popover-content{
      width: 600px;

  }
CincyBella
quelle
1

Sie können auch den Datencontainer = "body" hinzufügen, der die Aufgabe übernehmen soll:

<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>
treize
quelle
wow ... beantwortet auch die ursprüngliche Frage. Reinigen und Bootstrap nicht überschreiben.
Johnathan Elmore
Wie ändert sich dadurch die Breite des Popovers?
t.durden
1

Sie können die Vorlage Ihres Popovers ändern. Entweder mit dem data-template-attribute oder mit dem relevanten Teil in der Funktion, die es einrichtet:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

FalcoGer
quelle
0

Für eine Typoskriptkomponente:

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

In Angular können ng-bootstrapSie einfach container="body"zu dem Steuerelement wechseln, das ein Popover auslöst (z. B. Schaltfläche oder Textfeld). Dann müssen Sie in Ihrer globalen Stildatei ( style.cssoder style.scss) Datei hinzufügen .popover { max-width: 100% !important; }. Danach wird der Inhalt des Popovers automatisch auf seine Inhaltsbreite eingestellt.

Ramin Ar
quelle
0

In Bootstrap 4 können Sie den Standardwert der Bootstrap-Variablen $popover-max-widthin Ihrer Datei styles.scss einfach wie folgt überschreiben:

$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";

Weitere Informationen zum Überschreiben der Bootstrap 4-Standardeinstellungen finden Sie unter https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Aleksei Protopopov
quelle
0

In Bootstrap 4 können Sie die Vorlagenoption einfach überprüfen, indem Sie die maximale Breite überschreiben:

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

Dies ist eine gute Lösung, wenn Sie mehrere Popover auf der Seite haben.

Vincent Decaux
quelle
-2

Versuche dies:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));
Phani CR
quelle
Dies funktioniert aufgrund der letzten Zeile nicht. Wenn Sie eine Ganzzahl als Wert für die Breite analysieren, wird CSS unterbrochen. Stattdessen sollten Sie Folgendes versuchen: $('.popover').css('width', popover_size + 'px');Da popover_size als Ganzzahl analysiert wird. Eine andere Sache ist die: popover_size = ((parseInt(string[0])+350));Fügt zusätzliche Breite hinzu.
Todor Todorov