p:menu in fullPage layout

UI Components for JSF
Post Reply
xin_yao
Posts: 13
Joined: 16 Dec 2011, 09:51

03 Feb 2012, 03:09

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:

Code: Select all

<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

chang82
Posts: 7
Joined: 27 Jul 2010, 16:21

08 Feb 2012, 14:07

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

Code: Select all

<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

xin_yao
Posts: 13
Joined: 16 Dec 2011, 09:51

09 Feb 2012, 03:15

Hi Chang,

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

kamote
Posts: 1
Joined: 22 Feb 2012, 13:00

22 Feb 2012, 13:10

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

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

22 Feb 2012, 18:15

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 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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

dildeepak
Posts: 19
Joined: 13 Feb 2013, 09:42
Location: India

13 Feb 2013, 09:51

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

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 21 guests