form - popover bootstrap 3 html

Cambiando el ancho del popover bootstrap de twitter

Question

Estoy tratando de cambiar el ancho de popover bootstrap de twitter usando bootstrap 3:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

$(''#popover'').popover(options)

Por el momento, el contenido en el popover se extiende en dos líneas. Quiero que el contenido de popover permanezca en una línea. es posible?

Estoy usando C #, html y css.

Answer 1

Es posible que tenga una solución más fácil:

Agregue la siguiente clase css :

.app-popover-fw { width: 276px; }

Usa la siguiente plantilla para tu popover

var newPopoverTemplate = ''<div class="popover app-popover-fw" role="popover">'' +
                             ''<div class="arrow"></div>''+ 
                             ''<h3 class="popover-title"></h3>''+
                             ''<div class="popover-content"></div>''+
                          ''</div>'';

$(''#example'').popover({template: newPopoverTemplate });`

Violín de trabajo : http://jsfiddle.net/b5Ly2ynd/

NB : Como dijeron otros, hay una propiedad de "ancho máximo" en popovers bs. Tienes que modificar este si quieres que tu popover sea más grande que 276px.

Answer 2

Otra opción es usar una plantilla personalizada como (se agregó solo una clase adicional: popover-lg):

<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

Luego en css:

.popover-lg {
    max-width: 100%;
}

Invocación:

$(".your-element")..popover({
        trigger: "hover",
        template: templateString,
        container: "body",
        content: ''...'',
    });

De esta forma, está limpio y no interfiere con el comportamiento de arranque original.

Answer 3

Puede ajustar el ancho del popover, pero lo mejor que puede hacer es definir el ancho del contenido antes de que Bootstrap vea. 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)

Answer 4

Puede usar CSS para aumentar el ancho de su popover.

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Answer 5

Puedes cambiar las dimensiones del popover con CSS:

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

Pero ese CSS cambiará TODOS los popovers. Lo que debes hacer es poner el botón en un elemento contenedor y usar CSS así:

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

También necesita cambiar data-container="#containerElem" para que coincida con su contenedor.

NOTA: si su popover va a tener un ancho superior a 276px, también debe sobrescribir la propiedad de max-width . Así que agrega max-width: none a la clase .popover {} .

Aquí hay un jsFiddle: http://jsfiddle.net/4FMmA/

Answer 6

Puedes lograrlo de dos maneras, una reduciendo el tamaño de la fuente para la clase ''popover'' y la otra reduciendo el relleno en la clase ''popover-content''. Así es como lo logré,

.popover {
  font-size: 12px;
}

.popover-content {
  padding: 5px 5px;
}

Answer 7

Si quieres controlar el ancho en javascript:

HTML (ejemplo de Bootstrap)

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

Javascript:

Establecemos el ancho máximo cuando se desencadena el evento show.bs.popover :

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

http://jsfiddle.net/ctoesca/u3kSk

• También puede agregar un atributo data-max-width en el elemento button y obtener el valor en la función trigger:

p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});

Answer 8

Usa este código Funcionará bien:

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

Answer 9

Use el siguiente código:

.popover {
      width: 600px;
      max-width: 600px;
      font-size: 13px;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre;
      width: 600px;
    }

Answer 10

.popover{
    max-width: 100%;
    width: <width>;
}

El ''ancho máximo'' establece el ancho máximo de popover al ancho de la página. A continuación, puede establecer el ancho que desee