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

发布于 2025-01-03 04:23:08 字数 1289 浏览 2 评论 0原文

几天前，我在 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]

原文

few days ago i ask 1 question in primefaces forum but nobody reply me.

I facing a problem while using in fullpage layout(position="west"), the submenu can't fully display out.
Can make it display overlap to the (position="center") as I don't wish to increase the width of the west layout?

below link atatch with a picture as reference.

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

this is part of the code:

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

I just update primefaces to 3.1, and found out got 1 feature overlayPanel, may I know whether it can be used to solve my problem?

thanks in advance..

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏の忆 2025-01-10 04:23:09

终于有人回复我在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>

finally got someone reply my post in the primefaces forum.

It solved my problem.

here is the link:
http://forum.primefaces.org/viewtopic.php?f=3&t=18033&p=56425#p56425

update:
answer: some css tricks will be able to fix it, just change the overflow and z-index property.
I attach the answer code as below:

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

回复收藏 0 原文

~没有更多了~