steps showcase panelmenu outcome org navegacion example dinamico barra java jsf primefaces menubar

java - panelmenu - primefaces showcase



Submenú desplegable JSF PrimeFaces MenuBar desapareciendo después del control deslizante en p: diseño (4)

¿Por casualidad estableciste un tamaño de fuente personalizado para tu ui-widget ? Personalmente, tuve la siguiente configuración de CSS:

.ui-widget { font-size: 12px !important; }

y experimenté un problema similar al suyo en Firefox (pero no en Chrome). Curiosamente, después de aumentar el tamaño de la fuente a 13px, el problema se solucionó.

Haciendo alguna aplicación en JSF PrimeFaces 3.1.1 (sigue aprendiendo) y he implementado el diseño de página completa - Sunny (la etiqueta <p:layout /> ). Todo está bien, excepto mi barra de menú.

Al desplazar el cursor sobre el botón del submenú en el menú, aparece el submenú desplegable, pero cuando quiero pasar el mouse al submenú, desaparece. La única opción es cambiar la posición del mouse al submenú muy rápido, de lo que queda. Y ese es el problema, necesita que funcione normalmente, no que desaparezca.

Si pongo los diseños, la barra de menú funciona bien nuevamente. También intenté copiar y pegar código de PF showcase, el problema fue el mismo.

Usando JSF 2 en Tomcat 7.0.22.0. Aquí hay algo de mi código ...

La barra de menú en una plantilla:

<p:layoutUnit position="north" size="130"> <ui:insert name="top"> <p:menubar id="mainMenu" model="#{menu.mainMenu}" /> </ui:insert> </p:layoutUnit>

El CSS soluciona problemas de desbordamiento:

.ui-layout-north .ui-layout-unit-content { overflow: visible !important; } .ui-layout-north { z-index: 30 !important; overflow: visible !important; }

¡Gracias por la ayuda!

La barra de menú funciona en IE o Chrome, pero en Firefox no se muestra correctamente, puedes ver eso en Comprobar esto con firefox y ver qué pasa :)

Resuelvo este problema con

.ui-menubar .ui-menuitem-text { font-size: 13px!important; top: -1px; }

Esto no es ideal pero me solucionó el problema:

.ui-menuitem-link { max-width: 180px; }