如何使用整页布局在 Primefaces 扩展中获取菜单溢出？答案

【问题标题】：How to get menu overflow in Primefaces Extension with fullpage layout?如何使用整页布局在 Primefaces 扩展中获取菜单溢出？
【发布时间】：2012-06-15 10:37:42
【问题描述】：

问题是我的菜单总是在中心窗格下，我不知道如何解决这个问题。我曾尝试更改 css，但是在更改 pe-layout-pane-content 溢出值时，滚动条不再可见，没有它，pe-north 中的 z-index 根本没有帮助。这让我发疯，因为它曾经在使用 p:layout 和 css-changes 时工作。

我有这样的模板：

<h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <h:outputStylesheet library="css" name="global.css"/>
        <style type="text/css">


            .noBorders tr, .noBorders td {
                background: none !important;
                border: none !important;
            } 
        </style>
 </h:head>

    <h:body>

        <pe:layout  fullPage="true" > 

            <pe:layoutPane  position="north" size="50"  resizable="false" closable="false" spacing="0" rendered="true" >  
                <ui:insert name="north">

                    <ui:include src="/resources/templates/menuBar.xhtml"/>    
                </ui:insert>
            </pe:layoutPane>  



            <pe:layoutPane position="west" size="215"  resizable="true" closable="true" spacing="-3">  
                <ui:insert name="west">

                </ui:insert>         
            </pe:layoutPane>   



            <pe:layoutPane position="east" size="200"  resizable="true" closable="true" spacing="-4" >  
                <ui:insert name="east"> 

                    <ui:include src="/resources/templates/commonRight.xhtml"/>  
                </ui:insert>
            </pe:layoutPane> 




            <pe:layoutPane position="center"  size="800" resizable="false">  
                <h2>
                    <ui:insert name="title">Default Title</ui:insert>
                </h2>

                <ui:insert name="center">

                    Center from newTemplate

                </ui:insert>
            </pe:layoutPane> 

            <pe:layoutPane position="south" rendered="false" statusbar="false" size="60"  resizable="true" closable="true" spacing="0">  
                <ui:insert name="south">


                    <ui:include src="/resources/templates/commonFooter.xhtml"/>


                </ui:insert>
            </pe:layoutPane>  

        </pe:layout>  
    </h:body>

然后我的 menuBar.xhtml 是这样的：

<h:head>
        <title>menuBar.xhtml</title>



    </h:head>
    <h:body>
        <ui:composition>
            <h:form>
                <p:menubar rendered="true" style="border: none; z-index: 9998; overflow: visible" >
<p:submenu label="#{bundle.menuBar_partners}" icon="ui-icon-document">
                        <p:menuitem value="#{bundle.menuBar_partners_info}" url="#"/>
                        <p:submenu label="cars" icon="ui-icon-contact" >
                            <p:menuitem value="www.rangerover.com" url="http://www.rangerover.com"/>
                            <p:menuitem value="www.lada.com" url="www.lada.com"/>
                        </p:submenu>
</p:submenu>


                </p:menubar>


            </h:form>
        </ui:composition>

    </h:body>

如果有人知道如何解决这个问题，我将非常感激。萨米人

【问题讨论】：

标签： jsf primefaces overflow primefaces-extensions

【解决方案1】：

当我将此 CSS 与常规 primefaces 布局和 layoutUnit 一起使用时，溢出在我的北菜单中可以正常工作，但当我将相同的 CSS 与 pe 布局和 layoutPane 一起使用时，它就不行了。

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

也许你现在可以切换到 p 布局和 layoutUnit，因为 primefaces 扩展似乎已经打破了 CSS 的溢出。

另外，使用 pe 时，我的北方菜单右侧出现了一个愚蠢的滚动条，但使用 p 时却没有。

而且，如果 Oleg 给我们一个 CSS 解决方案（如果有的话）并让我们在他的更新解决这个问题时及时通知我们，那可能会很好。

【讨论】：

【解决方案2】：

你应该对你的 css 进行以下更改

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

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

【讨论】：

【解决方案3】：

Sami，我们已经在 PF Extensions 论坛http://forum.primefaces.org/viewtopic.php?f=14&t=22621&start=20 讨论过这个问题，你现在有了滚动条。关于菜单，请尝试在菜单上使用更高的 z-index。

我计划在下一个版本中重新实现布局组件以修复一些已知问题，使用更多功能增强布局并允许对嵌套子布局进行 AJAX 更新。

谢谢。奥列格。

【讨论】：