JSF primary strings using menu in layout

I have a problem with my JSF page using layout. I am trying to position my menu in the title section of a north-placed element. It correctly positions the menu. But I need to scroll up or down the layout block to click the menu items. Is there any other way to achieve this? Using the right

Also my treenode is never displayed. (Take 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> 

+6
source share
1 answer

You just need to override the default CSS layout:

  .ui-layout-north { z-index:20 !important; overflow:visible !important; } .ui-layout-north .ui-layout-unit-content { overflow:visible !important; } 
+20
source

All Articles