Question

我的JSF页面使用布局有问题。我试图将我的菜单栏定位在北方定位布局单元的标题部分。它正确定位菜单栏。但我需要向上或向下滚动布局单元以单击菜单项。有没有其他方法来实现这一目标？使用primefaces

此外，我的treenode永远不可见。（看一下评论代码）

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

您只需覆盖默认的CSS布局：

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

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

JSF Primefaces在布局问题中使用菜单栏

1 个答案: