Jquery 如何解决p:layout中的primefaces p:megaMenu问题?
如何在Jquery 如何解决p:layout中的primefaces p:megaMenu问题?,jquery,css,jsf,jsf-2,primefaces,Jquery,Css,Jsf,Jsf 2,Primefaces,如何在p:layout中使用p:megaMenu?布局封面菜单内容的内容。 让我知道任何解决方案或建议 template.xhtml <p:layout fullPage="true"> <p:layoutUnit position="north" size="40"> <ui:include src="/common/menu.xhtml"/> </p:layoutUnit> <p:layoutUnit p
p:layout
中使用p:megaMenu
?布局封面菜单内容的内容。
让我知道任何解决方案或建议
template.xhtml
<p:layout fullPage="true">
<p:layoutUnit position="north" size="40">
<ui:include src="/common/menu.xhtml"/>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content"/>
</p:layoutUnit>
<p:layoutUnit position="south" size="40">
<ui:include src="/common/footer.xhtml"/>
</p:layoutUnit>
</p:layout>
menu.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form id="menuForm">
<p:megaMenu autoDisplay="false">
<p:menuitem value="Dashboard" action="dashboard" ajax="false" immediate="true"/>
<p:submenu label="Report">
<p:column>
<p:submenu label="Agent">
<p:menuitem value="Agent Commission Detail Report" action="agentCommissionDetailReport" ajax="false" immediate="true"/>
<p:menuitem value="Agent Information Report" action="agentInformationReport" ajax="false" immediate="true"/>
<p:menuitem value="Sales Report" action="salesReport" ajax="false" immediate="true"/>
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
</ui:composition>
如下图所示:
我从Primefaces论坛得到了一些解决方案。我通过更改CSS解决了这个问题。 它现在运行良好
<h:head>
<style>
#topPanel {z-index:2 !important; }
#topPanel div{overflow:visible;}
</style>
</h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50" id="topPanel">
<ui:include src="/common/menu.xhtml"/>
</p:layoutUnit>
......
#topPanel{z-index:2!重要;}
#topPanel div{溢出:可见;}
......
您使用的是哪个PF版本?所有浏览器都一样吗?primefaces-4.0和primefaces-3.5有同样的问题。我只使用Firefox浏览器。