如何使p:selectOneMenu在对话框内正确计算它的宽度？

Question

当我在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>

- Michael Calvin

---

什么浏览器？我知道在使用IE时，对话框的宽度是固定的。 - siebz0r

我正在使用Chrome浏览器。我想我应该提一下这个。 - Michael Calvin

Answer 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才能让字符保持不覆盖。

- Alanzi

Answer 2

将您的p:selectOneMenu与一个div一起包含在对话框中。

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

你可能也可以使用一些PrimeFaces组件来包装selectOneMenu，但我认为你不应该使用组件来修复样式问题。

- Akos K

---

我尝试过这个，但是selectOneMenu不能扩展以填充div。我还尝试使用100％宽度对selectOneMenu本身进行样式设置，但文本是右对齐的，按钮覆盖了最右边的几个字符。 - Michael Calvin

我误解了你的问题，集中在p:dialog上。我不知道你使用了什么样的样式，但是在<p:selectOneMenu value="A" style="text-align: right; padding-right: 15px">中添加一些填充可以使文本出现在selectOneMenu内部，而不会被覆盖。当然，填充大小可能取决于您的字体大小。 - Akos K