p:selectOneMenu 大纲嵌套在 p:panel 中时会获得额外的空间

Question

我正在使用 PrimeFaces 5.2，我在 p:panel 中有一个 p:selectOneMenu。如果selectOneMenu 在面板外，问题不会持续存在，但在面板内时，它看起来像这样：

你可以看到selectOneMenu右侧的失真。

我尝试了一些 CSS 编辑，但似乎没有帮助：

.ui-selectonemenu-panel{
    width: 150px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper{
    overflow-x: hidden;
}

在.ui-selectonemenu-panel 中将宽度设置为 150 像素仅有助于恢复下拉菜单的大小，而不是扭曲的部分本身。

从 xhtml 文件更改 selectOneMenu 宽度并不能解决问题。我使用的主题是一个名为“bootstrap”的 PrimeFaces 主题，但调整主题的大小也不起作用。我没有尝试不同的主题，因为我想继续使用这个主题。

selectOneMenu 应该是这样的：

我在网上找不到与此问题类似的任何内容。任何帮助表示赞赏。

Answer 1

感谢 Geinmachi 的评论，我明白了。更改 ui-selectonemenu-label 似乎有效。

最初我的selectOneMenu 的宽度为 150 像素，我最初在我的 CSS 文件中这样编辑ui-selectonemenu-label：

.ui-selectonemenu-label{
    width: 80px !important;
}

我的每个selectOneMenus 开始看起来像这样：

您可以看到右侧的灰色区域是由缩小的标签引起的。当我将宽度设为 200px 时，它看起来像这样：

但是当我将标签宽度设置为 150 像素时，我观察到与我的问题中所描绘的相同的额外空间。所以我尝试将其设置为 120px，它看起来是固定的。我认为右侧的灰色下拉按钮大约有 30px 宽度，因此设置标签宽度而不考虑 30px 差异会导致超出selectOneMenu 的额外空间。

但是，我仍然不知道为什么只有在selectOneMenu 嵌套在面板中时才会出现额外的空间。