angularjs - UI Bootstrap Popover: cambiar ancho
angular-ui-bootstrap (6)
¿ Probó el atributo popover-append-to-body del componente popover?
Estoy tratando de usar los popovers de UI Bootstrap en AngularJS: http://angular-ui.github.io/bootstrap/#/popover
<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>
Me da un popover como este:
¿Cómo puedo cambiar de estilo el ancho de este popover?
De los http://angular-ui.github.io/bootstrap/#/popover puede utilizar el
atributo
popover-class: clase personalizada que se aplicará a la ventana emergente
<i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>
En tu hoja de estilo
.increase-popover-width {
max-width: 400px;
}
La razón para configurar max-width lugar del width es que bootstrap tiene popover-max-width establecido como 276px .
El ancho se puede cambiar fácilmente al anular el .popover :
.popover {
width: 200px;
}
Otra solución si tiene ventanas emergentes muy amplias es permitirles que se ajusten automáticamente.
Solo configura tu css para que sea así
.popover {
max-width: 800px; /* optional max width */
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
Para mí lo siguiente funcionó.
.popover {
max-width: 450px;
}
Esto realmente cambió el tamaño del contenedor popover blanco.
Puedes lograrlo anulando la clase de contenido emergente:
.popover-content {
width: 200px;
}
ACTUALIZACIÓN: Puede verificar esto en Chrome: - presione F12 - seleccione la lupa - haga clic en el elemento para inspeccionar - modifique su estilo