如何让 p:selectOneMenu 在对话框中正确计算其宽度？答案

【问题标题】：How can I get p:selectOneMenu to calculate its width correctly inside dialogs?如何让 p:selectOneMenu 在对话框中正确计算其宽度？
【发布时间】：2012-09-06 16:52:35
【问题描述】：

当我在 p:dialog 中嵌入 p:selectOneMenu 时，它的初始宽度在 Primefaces 3.4 中太小了。这些小部件的宽度在 Primefaces 3.2 中非常好。我需要做一个 hack 来解决这个问题吗？

问题出现在 Chrome 中。以下示例代码演示了该问题：

<p:selectOneMenu value="A" onchange="testDialog.show()">
  <f:selectItem itemLabel="Default item" itemValue="A" />
  <f:selectItem itemLabel="Click here to show the dialog" itemValue="B" />
</p:selectOneMenu>
<p:dialog header="Test dialog" widgetVar="testDialog">
  <p:selectOneMenu value="A">
    <f:selectItem itemLabel="This one here in the dialog" itemValue="A" />
    <f:selectItem itemLabel="doesn't calculate" itemValue="B" />
    <f:selectItem itemLabel="its width" itemValue="C" />
    <f:selectItem itemLabel="correctly" itemValue="D" />
  </p:selectOneMenu>
</p:dialog>

【问题讨论】：

什么浏览器？我知道使用 IE 时对话框的宽度是固定的。
我正在使用 Chrome。我想我应该提到这一点。

标签： dialog primefaces selectonemenu

【解决方案1】：

我能够重现您的问题；就像下拉按钮完全不知道它覆盖了文本框一样。在我的设置中，我能够通过这个 CSS 修复让 selectOneMenus 正确显示：

<style type="text/css">
    .ui-selectonemenu label.ui-selectonemenu-label {
        padding-right: 28px;
        text-align: left;
    }
</style>

编辑：哦，哎呀，我看到这个解决方案与 akoskm 的评论非常相似。但我当时试过了，text-align: right 对我不起作用；只有text-align: left 没有发现角色。

【讨论】：

【解决方案2】：

用 div 将 p:selectOneMenu 包装在对话框中

<p:dialog header="Test dialog" widgetVar="testDialog">
    <div style="width: 100%">
        <p:selectOneMenu value="A">
            ...
        </p:selectOneMenu>
    </div>
</p:dialog>

你也可以用一些 primefaces 组件包装 selectOneMenu，但我认为你不应该使用组件来修复样式故障。

【讨论】：

我试过了，但是 selectOneMenu 没有展开来填充 div。我还尝试将 selectOneMenu 本身设置为 100% 宽度，但文本是右对齐的，并且按钮会覆盖最右边的几个字符。
我误解了您的问题，专注于p:dialog。我不知道您使用了哪种样式，但添加一些填充 <p:selectOneMenu value="A" style="text-align: right; padding-right: 15px"> 使文本出现在 selectOneMenu 内，没有覆盖的字符。当然，填充的大小可能取决于您的字体大小。