Primefaces菜单栏菜单项宽度

问题描述：

希望包括事先知情同意，但wasnt允许 所以问题是愚蠢的，没有它

我似乎无法改变，以下拉菜单的宽度，我已经包含在我的脑海风格和每个菜单项的宽度ATTRIB，但他们并没有区别：

<style> 
ui-menu .ui-menu-parent .ui-menu-child 
{ 
    width: 400px; /* exagerated !! */ 
} 
</style>

当菜单项被加亮时，选择栏是正确的宽度！

任何线索???，这里是一个例子菜单栏

<p:menubar> 
    <p:submenu label="Menu 1" 
     style="text-align: left;"> 

     <p:menuitem ajax="false" 
        action="/Page1" 
        value="Page 1" 
        style="width: 350px;"/> 

     <p:menuitem ajax="false" 
        action="/too_long_page" 
        value="Some really long menu text that is far too long" 
        style="width: 350px;" /> 

     <p:menuitem ajax="false" 
        action="/too_long_page" 
        value="Some really long menu text that is far too long" 
        style="width: 350px;" /> 

    </p:submenu> 
    <p:menuitem ajax="false" 
       action="/Page2" 
       value="Page 2" /> 
</p:menubar>

答

头部内的风格元件很可能被由被后它放置在页面标记的Primefaces样式表中重写。如果通过Firebug查看页面，您可能会注意到自定义样式实际上已被Primefaces样式表覆盖。

在该说明中，您的样式表是正确的，因为使用Firebug我可以通过在DOM元素上强制该样式来增加菜单宽度。

试着将这个样式标签放在身体内，看看是否有所作为。

嗯有趣的用户名，反正会努力，感谢，见上面 – user784298 2012-06-11 02:45:14

答

这应有助于：

.ui-menu { 
    min-width: 350px; 
}

感谢的意见，但是，尝试所有这一切的变化，我认为这进一步的下跌，我甚至试过重要！如果我可以上传一个屏幕快照，你会看到问题是什么，或尝试重新使用非常长的文本作为一个或多个菜单项。 – user784298 2012-06-11 02:43:42

它适合我。尝试删除所有其他对ui-menu的引用 - 无论你的css源码如何。我也已将定义更改为最小宽度，因为宽度也会更改p：菜单栏的宽度。 – javaxian 2012-06-12 08:19:04

谢谢，会给我一个机会，当我有机会，不幸的是我有这样一个可怕的事情叫做“工作”要做： - } – user784298 2012-06-12 22:20:01

答

<style> 
    ul.ui-menu-child{ 
    width: 250px !important; 
     } 
</style>

临时解决方案。

答

谢谢你，谢谢你，谢谢你，最后一个答案这里是

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:p="http://primefaces.org/ui" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:c="http://java.sun.com/jsp/jstl/core"> 
    <h:head> 
     <title>Prime Faces Examples - ??</title> 
     <style> 
      ul.ui-menu-child 
      { 
       width: 460px !important; 
      } 
     </style> 
    </h:head> 
    <h:body> 
     <h:form> 
      <p:menubar> 
       <p:submenu label="Menu 1" 
          style="text-align: left;"> 

        <p:menuitem ajax="false" 
           action="/Page1" 
           value="Page 1" 
           style="width: 450px;"/> 

        <p:menuitem ajax="false" 
           action="/too_long_page" 
           value="Some really long menu text that is far too long" 
           style="width: 450px;" /> 

        <p:menuitem ajax="false" 
           action="/too_long_page" 
           value="Some really long menu text that is far too long" 
           style="width: 450px;" /> 

       </p:submenu> 
       <p:menuitem ajax="false" 
          action="/Page2" 
          value="Page 2" /> 
      </p:menubar> 
     </h:form> 
    </h:body> 
</html>

答

，如果你想宽度按照你的内容，使用此

ul.ui-menu-child { 
    white-space: nowrap; 
    width: auto !important; 
}

可能是这种情况下最好的CSS – ChristopherS 2014-05-05 09:41:26

答

使用本：

<style>  
     ul.ui-menu-child 
     { 
      white-space: nowrap; 
      width: 290px !important; 
     } 
</style>

只改变你需要的像素:)和菜单的下拉宽度将ch安格。

答

其他替代

ul.ui-menu-child { 
    width: auto !important; 
    min-width: 200px; 
}

Primefaces菜单栏菜单项宽度

相关推荐