3

Primefaces UI の 1 つでレイアウトの問題が発生しています。私は基本的に、以下のコードを使用して DIV でラップされたテーブルを持っています。最後の列には、水平に配置したいボタンが含まれている必要があるため、それらを panelGroup で囲みました

<div style="overflow: auto; height: 300px;">
    <p:dataTable >
        <p:column headerText="Column 1">
        </p:column>
        .
        .
        <p:column headerText="Actions">
            <h:panelGroup layout="span">
                <p:commandButton value="Edit" icon="ui-icon-scissors" />
                <p:commandButton value="Delete" icon="ui-icon-trash" />
            </h:panelGroup>
        </p:column>
    </p:dataTable>
</div>

ただし、レンダリングされると、ボタンは垂直に配置されます。HTML コードを表示すると、ボタンが両方とも div で囲まれていることがわかります。そのため、ボタンの間に改行があります。

この問題を解決するにはどうすればよいですか?

ありがとう

4

1 に答える 1

8

<h:panelGrid/>または でそれらをラップします<p:panelGroup/>。これによりtable、同じテーブル行に 2 つのテーブル セルが表示されます (したがって、同じ行に表示される必要があります)。

とh:panelGrid:

<h:panelGrid columns="2">
    <p:commandButton value="Edit" icon="ui-icon-scissors" />
    <p:commandButton value="Delete" icon="ui-icon-trash" />
</h:panelGrid>

とh:panelGroup:

h:panelGroupstyle、styleClass、または id 属性なしで使用すると、layout属性は効果がなく、追加の html はボタンの周りにレンダリングされません。とにかく、スタイルを追加します：

<h:panelGroup style="white-space: nowrap">
    ....
</h:panelGroup>

layout使用している値に関係なく、それらを水平方向に整列させます。

于 2012-10-30T06:02:45.770 に答える