3

Doing some application in JSF PrimeFaces 3.1.1 (still learning) and I implemented full page layout - Sunny (the <p:layout /> tag). Everytihng is fine, except my menu bar.

On hover on the submenu button in the menu, the dropdown submenu shows, but when I want to go by mouse to the submenu, it disappears. The only option is to change the mouse position to the submenu very fast - than it stays. And thats the problem, need it to work normally, not dissappearing.

If I put the layouts out, the menubar works well again. Also tried to copy & paste code from PF showcase, issue was the same.

Using JSF 2 on Tomcat 7.0.22.0. Here is something of my code...

The menubar in a template:

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

The CSS solving overflow problems:

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

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

Thanks for help!

Erveron
  • 1,908
  • 2
  • 25
  • 48

4 Answers4

2

Did you happen to set a custom font size for your ui-widget? Personally, I had the following CSS setting:

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

and I experienced similar issue like yours in Firefox (but not in Chrome). Oddly enough, after increasing font-size to 13px the problem was fixed.

Ariod
  • 5,757
  • 22
  • 73
  • 103
  • New version of PrimeFaces fixed the issue, but maybe this was the cause on the old one. – Erveron May 02 '12 at 19:44
  • 1
    I'm using the last version: primefaces-3.4.RC1.jar. The bug is still there. Changing of font size doesn't help. The slower I move the mouse the more chances a submenu will dissappear. – alehro Aug 28 '12 at 09:49
0

The menubar works in IE or Chrome but in firefox don't show correctly you can see that in Check this with firefox a see what happen :)

I solve this problem with

    .ui-menubar .ui-menuitem-text {
    font-size: 13px!important; top: -1px;
}
Eduardo Chavira
  • 916
  • 11
  • 7
0

This is not ideal but it solved the problem for me:

.ui-menuitem-link
{
    max-width: 180px;
}
Mohammed Pasha
  • 235
  • 2
  • 2
0

Please view next link http://forum.primefaces.org/viewtopic.php?f=3&t=16597.

It's a matter of font with.

This appear also in Firefox 27 and Prime Faces 4.0 RC.

In other browsers works well.

Cristian Florescu
  • 1,660
  • 20
  • 24