primefaces中如何增加子菜单的宽度

Question

以下是代码：

<p:commandButton styleClass=".MenuButtons" id="adminButton" value="administration']}"/>
      <p:tieredMenu overlay="true" trigger="adminButton" my="left top" at="left bottom">
        <p:menuitem styleClass=".MenuItems" value="file" url=" "/>
        <p:submenu  label=".next']}">
            <p:menuitem styleClass=".MenuItems" value="edit" url=" "/>
            <p:menuitem styleClass=".MenuItems" value="revert" url=""/>
        </p:submenu>
        <p:menuitem styleClass=".MenuItems" value="home" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit1" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit2" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit3" url="" rendered="" />
        </p:tieredMenu>

我试图增加子菜单的宽度。 尝试了以下方法：

1. ul.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{ width:160px; }

2. 将样式类添加到子菜单并应用。

来自浏览器的屏幕截图。 两种解决方案都不起作用。任何人都可以帮忙。

Answer 1

子菜单的宽度通过以下CSS规则设置：

.ui-menu .ui-menu-parent .ui-menu-child {
    width: 12.5em;
    ...
}

参见https://github.com/primefaces/primefaces/blob/11.0.0/primefaces/src/main/resources/META-INF/resources/primefaces/menu/menu.css#L89-L100

您需要做的就是覆盖它。 例如：

html .ui-menu .ui-menu-parent .ui-menu-child {
    width: ...;
}

也可以看看：

• 如何使用自定义 styles 覆盖默认值 PrimeFaces CSS？

Answer 2

我这样做并且它适用于我的项目......

/** Expand default menu width */
body .ui-menu .ui-menu-list .ui-menu-child {
    width: auto;
}