JSF Primefaces using menubar in Layout issue
I have a problem with my JSF Page using Layout. I am trying to position my menubar in the header section of the North positioned layout unit. It positions the menubar correctly.But I need to scroll up or down the layout-unit to click on the menu items. Is there any other way to achieve this? Using primefaces
Also my treenode is never visible.(Have a look at the commented code)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Committee and Meetings Management</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="false" collapsible="true">
<h:form>
<p:menubar id="menubar">
<p:submenu label="Committee" >
<p:menuitem value="Compose" url="#"/>
<p:menuitem value="Create" url="#"/>
<p:menuitem value="Modify" url="#"/>
<p:menuitem value="Search" url="#"/>
<p:menuitem value="Delete" url="#"/>
</p:submenu>
<p:submenu label="Logout" />
</p:menubar>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
<h:panelGrid id="bottom">
<h:outputText value="Best viewed with Google Chrome and Internet Explorer Version 6 or above"/>
<h:outputText value="Copyright © 2007 Newgen Software Technologies Limited. All rights reserved." />
</h:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">
<!--<h:form id="form">
<p:tree value="#{treeBean.root}" var="node" id="tree">
<p:treeNode id="treeNode">
<h:outputText value="#{node}" id="lblNode"/>
</p:treeNode>
</p:tree>
</h:form> -->
</p:layoutUnit>
<p:layoutUnit position="center">
Welcome #{login.userName}
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
Answer
You just need to override default CSS layout:
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}