1

Using Primefaces 2.2.1, if a submenu of a menubar is too big for the browser window, it appears above the menubar (outside of the page) and is unusable.

Simple test case:

Code:

<p:menubar>
<p:submenu label="test">
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
...
</p:submenu>
<p:menubar>

If you reduce the window size to some small height, you can see the problem.

It happens in showcase too, although the submenu is then simply hidden.

This makes it unusable for some clients (ipad).

Any workaround or solution ?

UPDATE: I can reproduce the problem on this page: http://wijmo.com/widgets/wijmo-open/menu/ ; if you reduce the window height to just somewhat less than the menu size, it appears above.

ymajoros
  • 2,454
  • 3
  • 34
  • 60

2 Answers2

1

Can you show us an image? Also you can upgrade to 3.0.M4 version if you aren't stuck with 2.2.1...

I've tested your code in version 3 and if I have a lot of menuItems, a scroll is appearing for easy navigation to the last item.

Anyway, I think the design is somehow wrong if you need so many menuItems for a single subMenu!

Another solution would be to use a tiered or sliding menu in the left corner/part of the page - I prefer the sliding menu exactly for these types of situations: you could have a thousand submenuItems! http://www.primefaces.org/showcase-labs/ui/menu.jsf

EDIT: Since you can't change the primefaces version, maybe it's time to look for the solution elsewhere:

  • a jquery solution, simple and efficient: I've written the code(html,css,javascript) here and you can see the result in the south-east box - http://jsfiddle.net/4UFmk/ .

The source blog: http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

EDIT2:

You do not have to change from Primefaces (by the way PF components are using already jquery), so you can use it's built-in jquery version(1.4 for PF 2 and 1.6 for PF 3):

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

So you can have a simple html/jquery solution inside primefaces components.

EDIT3:

Fixing the Primefaces menuBar implementation - adding a jquery function to fix the way the submenu(ul) is showing on clicking a menu item:

<h:form id='menuForm' >
     <p:menubar>
        <p:submenu label="test">
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          ...
        </p:submenu>
     <p:menubar>
</h:form>
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /> <!-- use the jquery library built-in primefaces -->
<h:outputScript>
// Add the $() function to avoid conflict with primefaces
$ = jQuery;
function mainmenu(){
    $("#menuForm li").click(
        function(e){
            $(e.currentTarget).children("ul").css("top", 28);
        });
}
$(document).ready( function(){ mainmenu(); });
</h:outputScript>
spauny
  • 4,976
  • 9
  • 44
  • 61
  • 1
    This is a production app, so I'm stuck to any stable version. Also, I fear a lot of other problems when going from 2.x to 3.x, so I'd rather do that when there is time for it. – ymajoros Dec 05 '11 at 11:25
  • +1 for the interesting ideas, but my client would like to have an horizontal menu that works on ipad. It used to work on 2.1, upgrade to 2.2.1 broke that. – ymajoros Dec 05 '11 at 12:42
  • Thanks, I appreciate your involvement, but I'm rather looking for a css fix or workaround in Primefaces. My application is using a lot of jsf and primefaces components, and I don't want to change that just for some ipad bug somewhere. I'd rather fix the problem. Even a patch to Primefaces or Wijmo Open Menu is acceptable. – ymajoros Dec 05 '11 at 13:50
  • I guess it's the right path, but couldn't get it to work yet: "uncaught TypeError: Property '$' of object [object DOMWindow] is not a function. – ymajoros Dec 05 '11 at 15:33
  • @ymajoros It looks like you aren't importing jquery, so the dollar sign from jquery isn't recognized... – spauny Dec 06 '11 at 06:08
  • @ymajoros Please tell me if your problem is resolved or is something you didn't understood... – spauny Dec 06 '11 at 11:38
  • I'm importing jquery (and primefaces does it anyway for this page), but it's in "conflict mode", see http://stackoverflow.com/questions/5457292/jquery-conflicts-with-primefaces . I'll try using jQuery instead of $ – ymajoros Dec 06 '11 at 11:58
  • @ymajoros I've told you not to import jquery, but to use primefaces built-in jquery framework! – spauny Dec 06 '11 at 12:01
  • Ok, thanks for your suggestion. I implemented a variant of this (see my answer). As I understood, your solution implements an alternative menu solution. I'll accept it if adapted. – ymajoros Dec 06 '11 at 12:46
  • I didn't import jquery, I'm using primefaces built-in version, but it needs this to work: $ = jQuery; – ymajoros Dec 06 '11 at 12:47
  • @ymajoros so, if I understand correctly, my solution works and I hope you're pleased and good to go further with your project! Hoping... – spauny Dec 06 '11 at 13:07
  • @almost, I found another solution based on yours. I still use primefaces menu, I just made a fix based on your technique. So, if you update your answer to include the fix rather than another implementation, or if you create a new answer including the fix, I'll accept it, as you provided the inspiration for it and a good part of the implementation. Thanks a lot :-) – ymajoros Dec 06 '11 at 13:11
  • @ymajoros I've updated my answer with the fix though I must say that I can't test my code because I don't use Primefaces 2 anymore. – spauny Dec 06 '11 at 13:39
  • @ymajoros Glad to be of help! I'm trying to provide the best answers here in the `Primefaces section of StackOverFlow`, so I would help in any circumstances but I'm not gonna lye by saying that I didn't like to earn 100 reputation :D – spauny Dec 06 '11 at 13:50
0

Here is the solution I implemented, based on @spauny 's suggestions.

It works for menus under an element with id="menuForm" (in my case, this is my form). Also, I display my menus when clickend only, replace click() with hover() if needed.

<h:outputScript>
$ = jQuery;
function mainmenu(){
    $("#menuForm li").click(
        function(e){
            $(e.currentTarget).children("ul").css("top", 28);
        });
}
$(document).ready( function(){ mainmenu(); });
</h:outputScript>
ymajoros
  • 2,454
  • 3
  • 34
  • 60