Cambiar el ancho de Bootstrap popover

Estoy diseñando una página usando Bootstrap 3. Estoy tratando de usar un popover con placement: right en un elemento de entrada. El nuevo Bootstrap asegura que si usas form-control básicamente tienes un elemento de entrada de ancho completo.

El código HTML se ve más o menos así:

 

El ancho de los popovers es demasiado bajo, en mi opinión porque no queda ningún ancho en el div. Quiero el formulario de entrada en el lado izquierdo, y un amplio popover en el lado derecho.

Sobre todo, estoy buscando una solución donde no tenga que anular Bootstrap.

El JsFiddle adjunto. La segunda opción de entrada. No he usado mucho jsfiddle, así que no sé, pero intente boost el tamaño del cuadro de salida para ver los resultados, en pantallas más pequeñas ni siquiera lo vería. http://jsfiddle.net/Rqx8T/

Aumenta el ancho con CSS

Puede usar CSS para boost el ancho de su popover, así:

 /* 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 esto no funciona, probablemente desee la solución a continuación y modifique su elemento container . ( Ver el JSFiddle )


Contenedor de arranque de Twitter

Si eso no funciona, probablemente necesite especificar el contenedor:

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

Más información

Twitter Bootstrap popover aumentar el ancho

El popover está contenido dentro del elemento en el que se desencadena. Para ampliarlo “ancho completo”, especifique el contenedor:

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

JSFiddle

Vea el JSFiddle para probarlo.

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

También necesitaba un popover más amplio para un campo de texto de búsqueda. Se me ocurrió esta solución de Javascript (aquí en Coffee ):

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

La solución está en la última línea. Antes de que se muestre el popover, la opción de ancho máximo se establece en un valor personalizado. También podría agregar una clase personalizada al elemento tip.

Yo tuve el mismo problema. Pasé bastante tiempo buscando una respuesta y encontré mi propia solución: agregue el siguiente texto a la cabeza:

  

Para cambiar el ancho puede usar css

Para el tamaño fijo deseado

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

Para ancho máximo deseado:

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

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

Para cambiar el ancho del popover, puede anular la plantilla:

 $('#name').popover({ template: '' }) 
 

Básicamente puse el código popover en la fila div, en lugar de la entrada div. Resuelve el problema.

Con la ayuda de lo que @EML describió anteriormente con respecto a popover en ventanas modales y también el código mostrado por @ 2 llamado-caos, así es como resolví el problema.

Tengo un ícono en el modal que al hacer clic debería aparecer

Mi HTML

  

Mi 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"); }); 

No hay una solución final aquí: / Solo algunos pensamientos de cómo “limpiamente” resolver este problema …

Versión actualizada (jQuery 1.11 + Bootstrap 3.1.1 + class = “col-xs-” en lugar de class = “col-md-“) de su JSFiddle original: http://jsfiddle.net/tkrotoff/N99h7/

Ahora el mismo JSFiddle con su solución propuesta : http://jsfiddle.net/tkrotoff/N99h7/8/
No funciona: el popover está posicionado en relación con la

+ imagine que tiene múltiples entradas para la misma

Entonces, si queremos mantener el popover en las entradas (semánticamente mejor):

  • .popover { position: fixed; } .popover { position: fixed; } : pero cada vez que se desplaza por la página, el popover no seguirá el desplazamiento
  • .popover { width: 100%; } .popover { width: 100%; } : no es tan bueno ya que todavía dependes del ancho padre (es decir,

  • .popover-content { white-space: nowrap; } .popover-content { white-space: nowrap; } : bueno solo si el texto dentro del popover es más corto que max-width

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

Quizás, usando navegadores muy recientes, los nuevos valores de ancho de CSS pueden resolver el problema, no lo intenté.

container: 'body' normalmente hace el truco (ver la respuesta de JustAnil anterior), pero hay un problema si tu popover está en un modal. El z-index coloca detrás del modal cuando el popover está unido al body . Esto parece estar relacionado con el problema BS2 5014 , pero lo estoy obteniendo en 3.1.1. No debes usar un container de body , pero si arreglas el código para

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

luego arreglas el problema del z-index , pero el ancho del popover sigue siendo incorrecto.

La única solución que puedo encontrar es usar container: 'body' y agregar algo de css adicional:

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

Tenga en cuenta que las soluciones CSS por sí mismas no funcionarán.

Puede usar el atributo data-container = “body” dentro de popover

  

Puede ajustar el ancho del popover con los métodos indicados anteriormente, pero lo mejor que puede hacer es definir el ancho del contenido antes de que Bootstrap vea y haga sus cálculos. Por ejemplo, tenía una mesa, definí su ancho y luego bootstrap construyó un popover para adaptarlo. (A veces, Bootstrap tiene problemas para determinar el ancho, y necesitas entrar y sostener su mano)

Aquí está la forma no coffeescript de hacerlo con el vuelo estacionario:

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

también puede agregar el contenedor de datos = “cuerpo” que debería hacer el trabajo:

 

Usé esto (funciona bien):

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

Para las personas que prefieren la solución de JavaScript. En Bootstrap 4 tip () se convirtió en getTipElement () y devuelve un objeto no jQuery. Entonces, para cambiar el ancho del popover en Bootstrap 4 puedes usar:

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

Termino estableciendo el ancho div “popover-content” al número que quiero. (otros ID o clase no funcionarán …) ¡Buena suerte!

  #popover-content{ width: 600px; } 

Una solución probada para Bootstrap 4 beta:

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

Junto con la statement jQuery:

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

Nota al margen, data-container="body" o container: "body" en HTML o como una option para el objeto popover({}) no funcionó realmente bien [tal vez el trabajo sí pero solo junto con el CSS statement];

Además, recuerde que Bootstrap 4 beta depende de popper.js para su posicionamiento de popover y tooltip (antes de eso era tether.js)

Prueba esto:

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