如何防止 Primefaces 在子菜单文本和三角形图标之间缠绕？

Question

当子菜单标签太长时，Primefaces 会将右指三角形放在下一行：

如何让 Primefaces 将三角形放在同一条线上，就像处理短子菜单项一样？

我看到了 Primefaces 菜单栏菜单项宽度，但是当我添加这些 CSS 规则时，行为并没有改变。

特别是，更改

a.ui-menuitem-link

包含链接文本和三角形图标的 CSS 并没有帮助：

a.ui-menuitem-link {
    white-space: nowrap;
    width: auto !important;
}

这可能是一些简单的 CSS 东西，但我只是没有看到它。

Answer 1

menuitem 样式仅影响菜单中的项目，不会作用于打开的整个菜单。

如果您使用 p:menuButton，您可以使用 menuStyleClass 属性：

• 名称：menuStyleClass
• 默认：空
• 类型：字符串
• 描述：叠加菜单元素的样式类。

一个简单的例子：

在你的CSS文件中：

.superWide
{
    width:      300px;
    min-width:  300px;
    max-width:  300px;
}

菜单按钮：

<p:menuButton value="menu" menuStyleClass="superWide">
    ...

结果可能因其他 primefaces 菜单类型而异。

Answer 2

我的解决方法是从 CSS 规则中删除

!important

；这样其他规则就可以覆盖它，在本例中是常规的 Primefaces 样式。