2013-04-01 19 views
6

Ich habe ein Problem mit meiner JSF-Seite mit Layout. Ich versuche, meine Menüleiste im Kopfbereich der Layout-Einheit im Norden zu positionieren. Es positioniert die Menüleiste korrekt. Aber ich muss die Layout-Einheit nach oben oder unten scrollen, um auf die Menüpunkte zu klicken. Gibt es einen anderen Weg, dies zu erreichen? Mit primefacesJSF Primefaces mit Menüleiste in Layout-Problem

Auch ist mein treenode nie sichtbar (Werfen Sie einen Blick auf den kommentierten 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> 

Antwort

20

Sie müssen nur Standard-CSS-Layout außer Kraft setzen.

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

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

Dank! Es hat funktioniert –

+0

Perfekt! Warum ist das nicht Standard ?! – Shane

+1

Nur als Referenz wird dies im Beispiel "komplexe Layout" aus der PrimeFaces-Präsentation verwendet: https://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ ui/layoutComplex.xhtml – acdcjunior

Verwandte Themen