p:menu type="tiered" menu overflow is hidden

matsa · 09 Jan 2012, 17:43

Hello.

I have a menu that is of type "tiered" which is placed in a layout unit (position: west) where the overflow generated by a submenu is hidden beneath the center layout unit.

Is this not supposed to be possible? Is there a best practice which I have missed?

best regards,

Mats

smithh032772 · 09 Jan 2012, 18:37

Is this related to the following post? Or is your bean code the same that is producing this p:menu type="tiered"?

Menu models fails to render after upgrading from M3 to M4

Reply with your bean and xhtml, so we can review and advise accordingly.

matsa · 10 Jan 2012, 10:22

Yes, thank you. I should have said. It is the exact same bean code and xhtml. The reason I opened a new thread for it is that I feel they are, at least somewhat, unrelated. And, therefore of course, I should have included bean and xhtml code.

In 3.0.M3, both sliding and tiered were visible as they should be, but the tiered variant became hidden by the center layout.
Whereas, in 3.0 Final, sliding is broken for me, and tiered is as before.

I'm having problems with posting the XHTML inside

Code: Select all

 tags. Both preview and submit result in site errors. Here's the xhtml code on pastebin: http://pastebin.com/8uamhkeb. As can be observed, I've removed the bean generated menu to prevent interference.

smithh032772 · 10 Jan 2012, 15:51

matsa wrote:I'm having problems with posting the XHTML inside Code tags. Both preview and submit result in site errors. Here's the xhtml code on pastebin: http://pastebin.com/8uamhkeb. As can be observed, I've removed the bean generated menu to prevent interference.

1. I have experienced the site errors as well when trying to paste content with single quote characters embedded; they may need to be escaped before you paste into this forum's editor. I think it is other special characters too, possibly double quote character that is interfering with the site's ability to parse character/string data inserted in this forum's editor. I could be wrong about this; this is only an assumption, since I haven't figured out the problem or haven't seen the problem in a few days.

matsa wrote:In 3.0.M3, both sliding and tiered were visible as they should be, but the tiered variant became hidden by the center layout.
Whereas, in 3.0 Final, sliding is broken for me, and tiered is as before.

2. I reviewed your xhtml that you provided and I have the following questions and suggestions.

3. What browser are you testing with? Okay, I see that you are testing with IE, FF, and Opera (from your other/earlier topic). In this forum, I've seen more developers have success with FF and Chrome, and definitely have issues with displaying Primefaces styles/content via IE. I saw a recent post/topic, here, discuss use of the following tag, added to xhtml, to help IE display Primefaces/jquery styles. Can you add this tag to your xhtml and reply with the test results?

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4. I saw the following in your xhtml? Is it possible that one of these styles are conflicting with PrimeFaces/jquery styles? Can you remove these CSS files, all at once, test, and/or remove them one-at-a-time, test, and let us know your test results and findings of which CSS is preventing your menu to... work as designed?

Code: Select all

            <h:outputStylesheet library="css" name="content.css" />
            <h:outputStylesheet library="css" name="override.css" />
            <h:outputStylesheet library="css" name="extensions.css" />
 
            <h:outputScript library="javascript" name="BusyBox.js"/>
            <h:outputScript library="javascript" name="SubmitHandler.js"/>
            <h:outputScript library="javascript" name="BarCodePrintUtils.js"/>
            <h:outputScript library="javascript" name="FlashStyles.js"/>

5. Within the last 6 to 12 hours, I had some Java (or EL) expressions embedded in my xhtml that was not working as designed/expected, especially this type of conditional expression with conditional operator. I moved the Java expression to my bean, and xhtml referenced the bean, and now my xhtml is working as designed/expected. I'd have to research why this occurs, but I don't trust boolean/conditional expressions in xhtml. Because of this, I have not found success or reliability in using JSF rendered="..." to this date, since rendered="..." requires a conditional/boolean expression (or EL). I know that I am still new to JSF development, but I have not mastered rendered="..." yet and prefer to do with. Please try to hardcode the following without the EL expression (or do like I did/described, move the EL expression to bean, and refer to bean from xhtml), test, and reply with the test results.

Code: Select all

<h:form id="menuForm" enctype="#{!empty enctype ? enctype : 'application/x-www-form-urlencoded'}">

6. Why do you feel the need to embed the Primefaces namespace (xmlns:p="...") in this p:panel?

Code: Select all

<p:panel header="#{menu.Header_MainMenu}" xmlns:p="http://primefaces.org/ui">
     <p:menu type="sliding">
	 <p:menuitem value="Tjohei"/>
	 <p:submenu label="Bah!">
	     <p:menuitem value="og"/>
	      <p:menuitem value="hå"/>
	  </p:submenu>
       </p:menu>
</p:panel>

7. You included the Primefaces namespace earlier in your xhtml (at the top). I wonder what happens when you remove the namespace reference from p:panel (above).

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:t="http://myfaces.apache.org/tomahawk"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:p="http://primefaces.org/ui">

8. In another recent post/topic, I helped someone else that saw differences in how p:dataTable was displaying across different version of PrimeFaces. I advised him to remove p:outputPanel, because it had styles etc defined, and that fixed the problem.

9. I really would like for you to View Source, and compare your rendered HTML to the rendered HTML of showcase example related to this topic. I really think it is one of the styles that you have defined. I've seen recent posts where removing/adding one custom style in your xhtml or css file can solve the issue.

Looking forward to your detailed response with test results. Please respond to each bullet above. Most of all, please respond with the fix, if you discovered the fix. Thanks.

smithh032772 · 11 Jan 2012, 05:47

See post below. There may be a CSS/style (.css file) in Primefaces JAR file that may be causing this error, and you may need to remove it from your copy of the JAR file.

accordianpanel fails to open activeindex panel

Still waiting for you to respond to my previous response here.

matsa · 22 Feb 2012, 10:24

I sincerely apologise. I was moved to another project at work and missed the fact that you had responded!

3. I always had

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in my XHTML code so I guess it has no impact.

4. Removing all my custom stylesheets was my first attempt to solve this.

5. The application in question uses the rendered tag extensively. The expression you refer to in the enctype attribute works perfectly not only there, but also in selecting the correct localisation bundle. While attempting to solve my problem, though, I have removed it. It has no impact.

6. The reason why the namespace is included here is because the code was taken from another XHTML file (i.e. menu.xhtml) which is included in the master template. To enable auto complete in NetBeans I duplicate the namespace. In my tests, though, I use a stripped down JSF application without this inclusion.

8. I have never used outputPanel but I use the regular panel extensively. I will perform experiments without it and get back to you.

9. I will investigate this more thoroughly.

I really appreciate your thorough response and I will pay more attention to the e-mail account the notifications arrive at (not my regular work e-mail, you see).

matsa · 22 Feb 2012, 12:24

This problem is easily reproducible if you create a simple XHTML page with the layout from http://www.primefaces.org/showcase/ui/layoutFull.jsf. The tiered menu is prevented from overflowing from e.g. west to center. I encounter the same problem if I try to use a menu bar in the north layout unit. This can be overcome by putting the menu inside the center layout unit but then the menu becomes susceptible to scrolling. The menu needs to be static. Someone requested the ability to "pin" menus back in 2011, but Cagatay set it to WontFix: http://code.google.com/p/primefaces/iss ... il?id=2312

I've attempted several CSS fixes: e.g. modify the z-index and using "position: fixed", but I'm unable to make neither the menu overflow between layout units nor make the menu "fixed" without weird side effects.

smithh032772 · 22 Feb 2012, 17:31

matsa wrote:The tiered menu is prevented from overflowing from e.g. west to center. I encounter the same problem if I try to use a menu bar in the north layout unit.

See showcase example: Complex Layout

View Source for the above example (which is mentioned at the bottom of that showcase page. I am doing the same layout, menubar in the top, and had to use the CSS (overflow) to make it work as it is in that showcase example.

Code: Select all

            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }

                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
            </style>

matsa · 23 Feb 2012, 13:27

Oh... I can't believe I missed that!

I am in your debt, Smith.

smithh032772 · 23 Feb 2012, 19:37

Did it solve your problem?

Please reply with the code you modified to fix your issue. Use Code tag via Code button, please.

p:menu type="tiered" menu overflow is hidden

Who is online