tab - primefaces tieredmenu
Primefaces menubar menuitem Ancho (7)
El elemento de estilo dentro del encabezado probablemente esté anulado por las hojas de estilo Primefaces que se colocan después de él en el marcado de la página. Si ve la página a través de Firebug, probablemente se dará cuenta de que el estilo personalizado está siendo anulado por las hojas de estilos Primefaces.
En ese sentido, su hoja de estilo es correcta porque al usar Firebug pude aumentar el ancho del menú forzando este estilo en el elemento DOM.
Intente colocar esta etiqueta de estilo dentro del cuerpo y vea si eso hace la diferencia.
Estoy teniendo problemas con el menú :(
Quería incluir una foto, pero no estaba permitido. Así que la pregunta es estúpida sin ella.
Parece que no puedo cambiar el ancho del menú desplegable, he incluido un estilo en mi cabeza y un atributo de ancho en cada elemento de menú, pero no han cambiado nada:
<style>
ui-menu .ui-menu-parent .ui-menu-child
{
width: 400px; /* exagerated !! */
}
</style>
Cuando el elemento del menú está resaltado, ¡la barra de selección tiene el ancho correcto!
¿Alguna pista? Aquí hay una barra de menús de ejemplo
<p:menubar>
<p:submenu label="Menu 1"
style="text-align: left;">
<p:menuitem ajax="false"
action="/Page1"
value="Page 1"
style="width: 350px;"/>
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 350px;" />
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 350px;" />
</p:submenu>
<p:menuitem ajax="false"
action="/Page2"
value="Page 2" />
</p:menubar>
Esto debería ayudar:
.ui-menu {
min-width: 350px;
}
<style>
ul.ui-menu-child{
width: 250px !important;
}
</style>
solución temporal.
Gracias, gracias, gracias, finalmente una respuesta aquí es
<?xml version=''1.0'' encoding=''UTF-8'' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Prime Faces Examples - ??</title>
<style>
ul.ui-menu-child
{
width: 460px !important;
}
</style>
</h:head>
<h:body>
<h:form>
<p:menubar>
<p:submenu label="Menu 1"
style="text-align: left;">
<p:menuitem ajax="false"
action="/Page1"
value="Page 1"
style="width: 450px;"/>
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 450px;" />
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 450px;" />
</p:submenu>
<p:menuitem ajax="false"
action="/Page2"
value="Page 2" />
</p:menubar>
</h:form>
</h:body>
</html>
si quieres el ancho sigue tu contenido, usa esto
ul.ui-menu-child {
white-space: nowrap;
width: auto !important;
}
utilizar esta:
<style>
ul.ui-menu-child
{
white-space: nowrap;
width: 290px !important;
}
</style>
Cambie solo los píxeles que necesita :) y el ancho desplegable del menú cambiará.
Otra alternativa
ul.ui-menu-child {
width: auto !important;
min-width: 200px;
}