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

标签 jsf layout primefaces menubar

我的使用布局的JSF页面有问题。我试图将我的菜单栏放置在北定位版式单元的标题区域中。它可以正确定位菜单栏。但是我需要上下滚动布局单元才能单击菜单项。
还有其他方法可以做到这一点吗?使用素数

而且我的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>

最佳答案

您只需要覆盖默认的CSS布局即可:

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

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

关于JSF Primefaces在布局问题中使用菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15738001/

相关文章:

jsf - 在 EL 中使用 && 会导致错误 : The entity name must immediately follow the '&' in the entity reference

javascript - 部分刷新问题触发两次

android - 从 TextInputEditText 中删除底线

css - 如何更改默认主页图标

java - JSF 如何通过 selectOneRadio 的 onchange 提交表单

jsf - 在 JSF 2.0 中刷新托管 session bean

java - 英语 3.0。 : Add Constants from Class to ELContext with spring managed bean

java - LinearLayout不出现

android - 水平对齐4个imagebutton

java - JSF 2.0 无法从 primefaces 呈现对话框