4

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

问题出现在 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>
4

2 回答 2

7

我能够重现您的问题；就像下拉按钮完全不知道它覆盖了文本框一样。在我的设置中，我能够通过这个 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让角色不被发现。

于 2012-10-15T16:36:08.680 回答
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，但我认为您不应该使用组件来修复样式故障。

于 2012-10-07T07:39:01.367 回答