it-swarm.com.de

Ändern der Breite des Bootstrap-Popovers

Ich entwerfe eine Seite mit Bootstrap 3. Ich versuche, ein Popover mit placement: right für ein Eingabeelement zu verwenden. Der neue Bootstrap stellt sicher, dass Sie bei Verwendung von form-control grundsä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 sie in div nicht die Breite hat. Ich möchte das Eingabeformular auf der linken Seite und einen breiten Popover auf der rechten Seite.

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

Die beigefügte JsFiddle. Die zweite Eingabemöglichkeit. Ich habe nicht viel von jsfiddle verwendet, also weiß ich es nicht, aber versuchen Sie, die Größe des Ausgabefelds zu erhöhen, um Ergebnisse zu sehen. Auf kleineren Bildschirmen würde es nicht einmal angezeigt werden . http://jsfiddle.net/ Rqx8T /

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>

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

6
mayankbatra

Breite vergrößern mit CSS

Mit CSS können Sie die Breite Ihres Popovers wie folgt vergrößern:

/* 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 Lösung unten und ändern Ihr container-Element. ( JSFiddle anzeigen )


Twitter-Bootstrap-Container

Wenn dies 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 increase width

Das Popover ist in dem Element enthalten, in dem es ausgelöst wird. Um es auf die 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 das JSFiddle an, um es auszuprobieren.

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

311
Anil

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 für die Option max-width ein benutzerdefinierter Wert festgelegt. Sie können auch eine benutzerdefinierte Klasse zum tip-Element hinzufügen.

37
2called-chaos

Ich hatte das gleiche Problem. Ich verbrachte einige Zeit damit, nach einer Antwort zu suchen und fand meine eigene Lösung: Fügen Sie dem Kopf folgenden Text hinzu:

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

Zum Ändern der Breite können Sie css verwenden

Für feste Größe gesucht

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

Für maximale Breite gesucht:

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

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

27
Pimento Web

Um die Popoverbreite 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>'
})
17
tyczo

Mit Hilfe dessen, was @EML oben in Bezug auf Popover in modalen Fenstern beschrieben hat, und auch den von @ 2called-chaos angezeigten Code, habe ich das Problem so 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"); });
6
ajitweb

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-")) Ihres ursprünglichen JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Nun dasselbe JSFiddle mit deiner vorgeschlagenen Lösung : http://jsfiddle.net/tkrotoff/N99h7/8/
Es funktioniert nicht: Der Popover wird relativ zum <div class="col-*"> + positioniert. Stellen Sie sich vor, Sie haben mehrere Eingaben für denselben <div class="col-*">...

Wenn wir also den Popover an den Eingängen behalten wollen (semantisch besser):

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

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

Bei sehr aktuellen Browsern können die neuen CSS-Breitenwerte das Problem möglicherweise lösen. Ich habe es nicht versucht.

4
tanguy_k

container: 'body' führt normalerweise den Trick aus (siehe JustAnil's Antwort oben), aber es gibt ein Problem, wenn Ihr Popover modal ist. Der z-index setzt es hinter dem Modal, wenn der Popover an body angehängt ist. Dies scheint mit BS2 Ausgabe 5014 zu tun zu haben, aber ich bekomme es auf 3.1.1. Sie sollen keine container von body verwenden, aber wenn Sie den Code auf fixieren 

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

dann beheben Sie das z-index-Problem, aber die Popoverbreite ist immer noch falsch.

Das einzige Update, das ich finden kann, ist, container: 'body' zu verwenden und ein paar zusätzliche css hinzuzufügen:

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

Beachten Sie, dass css-Lösungen alleine nicht funktionieren.

4
EML

Hier ist die nicht-kaffeeweise Methode, mit Hover das 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"
    });
  });
});
3
Abram

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>
3
Nayan Hodar

Sie können die Breite des Popovers mit den oben angegebenen Methoden anpassen. Am besten definieren Sie jedoch die Breite des Inhalts, bevor Bootstrap erkennt, dass es seine Berechnungen durchführt. Zum Beispiel hatte ich einen Tisch, ich definierte seine Breite, und dann baute Bootstrap einen Popover, der zu ihm passte. (Manchmal hat Bootstrap Schwierigkeiten, die Breite zu bestimmen, und Sie müssen hineingehen und seine Hand halten.)

2
CloudMagick

Für Benutzer, die die JavaScript-Lösung bevorzugen. In Bootstrap 4 tip () wurde getTipElement () und gibt kein 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");
});
2
Dirceu

sie können auch den data-container = "body" hinzufügen, der die Aufgabe erfüllen 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>
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>

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

  #popover-content{
      width: 600px;

  }
1
CincyBella

Ich habe das verwendet (funktioniert gut):

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

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'
    })

Side-note, data-container="body" oder container: "body" in HTML oder als option für das popover({})-Objekt hat den Trick nicht wirklich gemacht [vielleicht hat das geklappt, aber nur zusammen mit der CSS-Anweisung];

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

0
vzR

Für eine TypeScript-Komponente:

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