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

问题描述 投票:0回答:2

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

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

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

特别是,更改

a.ui-menuitem-link
包含链接文本和三角形图标的 CSS 并没有帮助:

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

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

css primefaces
2个回答
1
投票

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

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

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

一个简单的例子:

在你的CSS文件中:

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

菜单按钮:

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

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


0
投票

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

!important
;这样其他规则就可以覆盖它,在本例中是常规的 Primefaces 样式。

© www.soinside.com 2019 - 2024. All rights reserved.