在佈局問題中使用菜單欄的JSF Primefaces

我的使用佈局的JSF頁面出現問題。我試圖將我的菜單欄放置在位於北方的佈局單元的標題部分。它正確定位菜單欄。但我需要向上或向下滾動佈局單元以點擊菜單項。有沒有其他辦法可以達到這個目的？使用primefaces在佈局問題中使用菜單欄的JSF Primefaces

而且我的樹節點是不可見的（看一看註釋代碼）

<!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>

來源

2013-04-01 Kanika Prime

你只需要覆蓋默認的CSS佈局：

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

    .ui-layout-north .ui-layout-unit-content { 
     overflow:visible !important; 
    }

來源

2013-04-11 18:24:48

謝謝！它工作 –

完美！爲什麼不是默認？ – Shane

僅供參考，用於PrimeFaces展示中的「複雜佈局」示例：https://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ UI/layoutComplex.xhtml – acdcjunior

在佈局問題中使用菜單欄的JSF Primefaces

回答

相關問題