Board index JavaServer Faces General p:menu in fullPage layout

p:menu in fullPage layout

Components, Ajax Framework, Utilities and More.

Post 03 Feb 2012, 03:09

Posts: 13
Hi all,

I facing a problem while using <p:menu type="tiered"> in fullpage layout(position="west"), the submenu can't fully display out.
Can make it display overlap to the (position="center") as I don't wish to increase the width of the west layout?
below picture is for the reference.
Image

part of jsf code:

<p:layoutUnit position="west" size="200" > 
                 <ui:insert name="sideBar">                    
                    <h:form>
                        <p:menu type="tiered" > 
                            <p:submenu label="Sales" >                                  
                               <p:menuitem disabled="#{user.customer}" value="Approve" url="/sales/approve.jsf" style="width:50px" />                                           
                          </p:submenu>
                           <p:separator /> 
                          <p:submenu label="Customer">   
                               <p:menuitem disabled="#{user.sales}" value="customer" url="/customer/customer.jsf" style="width:50px" />
                          </p:submenu>
                      </p:menu>
                    </h:form>          
                 </ui:insert> 
             </p:layoutUnit>
Eclipse Juno, tomcat 7.028, Java EE 6, PrimeFaces 3.3, Mojarra 2.1

Post 08 Feb 2012, 14:07

Posts: 7
Hi xin_yao,

some css tricks will be able to fix it.
just change the overflow and z-index property.

i attach working sample code here
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui">

<h:head>
   <style>
      #leftPanel {z-index:2 !important; }
      #leftPanel div{overflow:visible;}
   </style>
</h:head>

<h:body>

   <p:layout fullPage="true" >

      <p:layoutUnit position="north" size="100"
         resizable="false" closable="false" collapsible="false">
         <h:outputText value="Top unit content." />
      </p:layoutUnit>

      <p:layoutUnit position="west" size="200" header="Left" id="leftPanel"
         resizable="true" closable="true" collapsible="true" >
         <h:form>
             <p:menu type="tiered" > 
                            <p:submenu label="Sales" >                                 
                               <p:menuitem  value="Approve" url="/sales/approve.jsf" style="width:50px" />                                           
                          </p:submenu>
                           <p:separator /> 
                          <p:submenu label="Customer">   
                               <p:menuitem  value="customer" url="/customer/customer.jsf" style="width:50px" />
                          </p:submenu>
                      </p:menu>
         </h:form>
      </p:layoutUnit>

      <p:layoutUnit position="center">
         <h:form> 
            This is center 
 
        </h:form>
      </p:layoutUnit>

   </p:layout>

</h:body>
</html>



image:
Image

hope it helps.

thanks

Post 09 Feb 2012, 03:15

Posts: 13
Hi Chang,

thanks for the answer. It solved my problem.
Eclipse Juno, tomcat 7.028, Java EE 6, PrimeFaces 3.3, Mojarra 2.1

Post 22 Feb 2012, 13:10

Posts: 1
I have the same problem but with a p:menuButton inside a toolbar in the north panel of a fullPage layout

i tried to fix it (using this post info) adding the following code in the head section:

<style>
#centerPanel {z-index:1 !important; }
#leftPanel {z-index:2 !important; }
#leftPanel div{overflow:visible;}
#topPanel {z-index:3 !important; }
#topPanel div{overflow:visible;}
</style>

but it did not work

Can anyone assist me ??

Thanks in advance

Post 22 Feb 2012, 18:15

Posts: 5778
kamote wrote:
I have the same problem but with a p:menuButton inside a toolbar in the north panel of a fullPage layout

i tried to fix it (using this post info) adding the following code in the head section:

but it did not work


1. See my response to a related forum topic: viewtopic.php?f=3&t=17428#p57887

2. Please see my signature below and learn to provide such information/details whenever you post/ask a question.
Howard

PrimeFaces 5.0, Extensions 2.0.0, Push (Atmosphere 2.1.7)
TomEE 1.6.0 (Tomcat 7.0.53), MyFaces Core 2.2.4
JUEL 2.2.6 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Post 13 Feb 2013, 09:51

Posts: 19
Location: India
Hi Kamote...

This is my code to display the menu items on top of the contents similiar to you.

<h:head>

<ui:insert name="headers"/>
<style>

#northPanel {z-index:2 !important; }
#northPanel div{overflow:visible;}
</style>
</h:head>


hope u find it helpful.... :P

Dilip Kumar Jha
Software Engineer at NTT DATA
----------------------------------------
PrimeFaces 3.5 | Mojarra 2.2 | JSF 2.0 | IBM RAD 8.5 |Websphere 8.5
Windows 7


Return to General