2

問題は、メニューが常に中央のペインの下に表示され、これを修正する方法がわかりません。css を変更しようとしましたが、pe-layout-pane-content オーバーフロー値を変更すると、スクロールバーが表示されなくなり、pe-north の z-index がまったく役に立ちません。css-changes で p:layout を使用するときに機能していたので、これは私を夢中にさせています。

私はちょうどそのようなテンプレートを持っています:

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

誰かがこれを修正する方法を知っていれば、私は非常に感謝しています。サーミ語

4

3 に答える 3

4

この 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;
}

Primefaces 拡張機能が CSS のオーバーフローを壊したように見えるので、おそらく p layout と layoutUnit に切り替えることができます。

また、pe を使用すると、ノース メニューの右側に愚かなスクロールバーが表示されますが、p では表示されません。

また、Oleg が CSS ソリューションを提供してくれ、彼の更新でこれが修正されたときに投稿し続けるとよいでしょう。

于 2012-08-25T17:54:50.303 に答える
1

cssに次の変更を加える必要があります

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

.ui-layout-north .ui-layout-unit-content {
    overflow:overflow !important;
}
于 2013-10-30T03:23:24.883 に答える
0

Sami さん、これについては PF Extensions フォーラムで議論しましたhttp://forum.primefaces.org/viewtopic.php?f=14&t=22621&start=20スクロールバーが表示されました。メニューに関しては、メニューの z-index を高くしてみてください。

次のリリースでレイアウト コンポーネントを再実装して、いくつかの既知の問題を修正し、より多くの機能でレイアウトを強化し、ネストされた子レイアウトで AJAX を更新できるようにする予定です。

ありがとう。オレグ。

于 2012-06-18T10:32:18.940 に答える