8

レイアウトを使用する JSF ページに問題があります。北に配置されたレイアウト ユニットのヘッダー セクションにメニューバーを配置しようとしています。メニューバーを正しく配置しますが、メニュー項目をクリックするには、レイアウトユニットを上下にスクロールする必要があります。これを達成する他の方法はありますか？プライムフェイスの使用

また、ツリーノードが表示されることはありません。(コメント付きのコードを見てください)

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

4

1 に答える 1

22

デフォルトの CSS レイアウトをオーバーライドするだけです。

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

    .ui-layout-north .ui-layout-unit-content {
        overflow:visible !important;
    }
于 2013-04-11T18:24:48.790 に答える