Larghezza pop-up bootstrap per popover-inner

Question

Mi piacerebbe avere un Bootstrap Popover più largo. Ho letto che questo dovrebbe funzionare:

.popover-inner a { 
    width: 600px; 
} 

Tuttavia, la console del browser mostra ancora auto con il codice precedente. Difficile da descrivere. Ecco un'istantanea:

Answer 1

base al largo di quello che ho in mio file bootstrap.css, il valore predefinito è una proprietà max-width.

Io uso questo

.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1010; 
    display: none; 
    max-width: 600px; 
    padding: 1px; 
    text-align: left; 
    white-space: normal; 
    background-color: #ffffff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
      border-radius: 6px; 
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
      background-clip: padding-box; 
} 

e funziona esattamente come si voleva che.

miei file bootstrap.css non contiene un popover-interno un selettore CSS affatto se

Answer 2

C'è un pull request sul bootstrap per rendere questo più facile, ma è possibile modify it using this technique di impostare l'opzione template per la popover:

$('#yourPopover').popover({ 
    template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
}) 

Quindi è possibile impostare il popover special-class css come più vi piace (larghezze e più!)

Answer 3

Ecco un campione di inizializzazione che uso.

$(".property-price") 
    .popover({ 
      trigger: "hover", 
      placement: 'bottom', 
      toggle : "popover", 
      content : "The from price is calculated ba....the dates selected.", 
      title: "How is the from price calculated?", 
      container: 'body', 
      template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>', 
     }); 

Come si può vedere, utilizza un modello personalizzato. Il modello utilizza una classe popover-media personalizzata.

Ho poi hanno un selettore CSS

.popover-medium { 
    max-width: 350px; 
} 

Si potrebbe anche solo impostare uno stile sulla classe template se si voleva.

Answer 4

Se si desidera controllare la larghezza minima della finestra popover, basta aggiungere una riga aggiuntiva nel CSS (o css extra) in questo modo:

.popover 
{ 
    min-width: 200px ! important; 
} 

(sostituire 200px con il valore desiderato)

Answer 5

.popover { 
    max-width: 600px; 
    width: auto; 
} 

cambiamento max-width al valore desiderato, è anche possibile impostare min-width, se lo si desidera

Answer 6

... 
width:auto; 
... 

era la soluzione perfetta nel mio caso. Ho avuto più popover sulla stessa pagina e uno di loro ha un URL lungo. Tutti sembrano belli ora. Grazie JFK!

Answer 7

1) Modo semplice: (attenzione: questo influenzerà tutte le popovers):

Basta sovrascrivere il bootstrap.stili popover come sotto

.popover{ 
    max-width: 600px; 
} 

2) metodo consigliato:

$("#a-div-id-001").popover({ 
    //set a custom container 
    // which can minimize the displacement of popover 
    //when window resizing 
    container: $("#Div"), 
    html : true, 
    content: function() { 
     return "<span>Hello there!</span>"; 
    }, 
    viewport: { 
     selector: 'body', 
     padding: 10 
    }, 
    title:"Apps", 
    template:'<div class="popover my-custom-class" role="tooltip">' 
     +'<div class="arrow"></div><h3 class="popover-title"></h3>' 
     +'<div class="popover-content"></div>' 
     +'</div>' 
}); 

prima aggiungere una classe personalizzata per il modello popover come sopra il mio-custom-class. Si noti che il popover verrà sottoposto a rendering utilizzando il modello predefinito a meno che non sia stato specificato un modello personalizzato.

poi sovrascrivere gli stili .popover di bootstrap come di seguito:

div.popover.my-custom-class{ 
    max-width: 600px; 
} 

questo stili permetterà di avere una larghezza dinamica fino a 600px. Se è necessario impostare una larghezza minima per il popover, è sufficiente impostare direttamente l'opzione larghezza. vedi esempio qui sotto,

div.popover.my-custom-class{ 
    min-width: 600px; 
} 

Quando si aumenta la larghezza, potrebbe essere necessario regolare lo spazio (offset) tra la scatola popover e la pagina bordo sinistro/destro. Vedere la proprietà viewport, in quanto imposta i limiti.

Answer 8

qualche risposta nel presente documento consiglia solo facendo la classe popover una certa larghezza. Questo non va bene, perché riguarda tutti i popover. Usa qualcosa come questo, invece, qualcosa di più mirato:

.container-div .popover { 
    /* add styles here */ 
} 

Answer 9

Disabilita max-width in .popover:

.popover { 
    max-width: none; 
} 

E poi si può giocare con la dimensione del contenuto più liberamente.

Answer 10

Aggiungi il testo popover come HTML con la propria classe e poi nei CSS file del componente aggiuntivo:

.popover .own-class { width: ... } 

larghezza elemento ".own-class" determinerà la larghezza popover.