primefaces菜单无法在全页面布局中完全显示

时间:2012-02-06 08:22:42

标签: layout menu primefaces overlap

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

我在使用全页布局(position =“west”)时遇到问题,子菜单无法完全显示出来。 可以让它显示重叠到(position =“center”),因为我不希望增加西部布局的宽度?

下面链接atatch,图片作为参考。

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]

1 个答案:

答案 0 :(得分:9)

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

更新:
回答:一些css技巧将能够修复它,只需更改overflow和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>
相关问题