primefaces 菜单无法在整页布局中完全显示答案

【问题标题】：primefaces menu cant fully display out in fullpage layoutprimefaces 菜单无法在整页布局中完全显示
【发布时间】：2012-02-06 08:22:41
【问题描述】：

几天前我在 primefaces 论坛上问了 1 个问题，但没有人回复我。

我在使用整页布局（position="west"）时遇到问题，子菜单无法完全显示出来。可以让它显示重叠到 (position="center") 因为我不想增加西布局的宽度？

以下链接附上图片作为参考。

http://www.imagebucket.net/bucket/is.php?i=10434&img=image.jpg

这是代码的一部分：

<p:layoutUnit position="west" size="200" >  
  <ui:insert name="sideBar">                        
    <h:form>
      <p:menu type="tiered" >  
        <p:submenu label="Sales" >                                      
          <p:menuitem disabled="#{user.customer}" value="Approve" url="/sales/approve.jsf" style="width:50px" />                                                
        </p:submenu> 
        <p:separator />  
        <p:submenu label="Customer">   
          <p:menuitem disabled="#{user.sales}" value="customer" url="/customer/customer.jsf" style="width:50px" />
        </p:submenu>
      </p:menu>
    </h:form>          
  </ui:insert>  
</p:layoutUnit>

我刚刚将primefaces更新到3.1，发现有1个功能overlayPanel，请问是否可以用来解决我的问题？

提前谢谢..

[Eclipse Indigo、tomcat 7、Java EE 6、PrimeFaces 3.1、Mojarra 2.0.3]

【问题讨论】：

这不是答案，只是一些信息。默认情况下，子菜单 DOM 元素的内联样式设置为 z-index: 1001，当它是 display: none 时，但是当它从 Javascript 悬停事件设置为 display: block 时，相同的事件也会增加 z-index: 1018。这样做的问题是，即使您设置了内联样式，它也可能会被 Primefaces javascripts 覆盖。但即便如此，我也不认为 z-index 是原因，因为中心面板的 z-index 通常默认设置为 1。这当然不是一个简单的问题。

标签： layout menu primefaces overlap

【解决方案1】：

终于有人在 primefaces 论坛上回复了我的帖子。
它解决了我的问题。
这里是链接：
http://forum.primefaces.org/viewtopic.php?f=3&t=18033&p=56425#p56425

更新：
回答：一些 css 技巧将能够修复它，只需更改溢出和 z-index 属性。
我附上答案代码如下：

<h:head>
 <style>
  #leftPanel {z-index:2 !important; }
  #leftPanel div{overflow:visible;}
 </style>
</h:head>

<p:layoutUnit position="west" size="200" id="leftPanel">  
  <ui:insert name="sideBar">                        
    <h:form>
      <p:menu type="tiered" >  
        <p:submenu label="Sales" >                                      
          <p:menuitem disabled="#{user.customer}" value="Approve" url="/sales/approve.jsf" style="width:50px" />                                                
        </p:submenu> 
        <p:separator />  
        <p:submenu label="Customer">   
          <p:menuitem disabled="#{user.sales}" value="customer" url="/customer/customer.jsf" style="width:50px" />
        </p:submenu>
      </p:menu>
    </h:form>          
  </ui:insert>  
</p:layoutUnit>

【讨论】：