4

p:selectOneMenuにaを埋め込むとp:dialog、Primefaces3.4では初期幅が小さすぎます。これらのウィジェットの幅は、Primefaces3.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:selectOneMenudivでダイアログをラップします

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

selectOneMenuをいくつかのprimefacesコンポーネントでラップすることもできますが、スタイリングの不具合を修正するためにコンポーネントを使用するべきではないと思います。

于 2012-10-07T07:39:01.367 に答える