I want a layout of <p:panelGrid>
(or <h:panelGrid>
) as shown in the following snap shot.
The following code,
<p:panelGrid style="width: 100%;">
<p:row>
<p:column rowspan="9">a</p:column>
<p:column rowspan="7">b</p:column>
<p:column>c</p:column>
</p:row>
<p:row><p:column>d</p:column></p:row>
<p:row><p:column>e</p:column></p:row>
<p:row><p:column>f</p:column></p:row>
<p:row><p:column>g</p:column></p:row>
<p:row><p:column>h</p:column></p:row>
<p:row><p:column>i</p:column></p:row>
<p:row><p:column>j</p:column></p:row>
<p:row><p:column>k</p:column></p:row>
</p:panelGrid>
shows the layout as shown in the following snap shot.
How can I achieve the layout as shown in first snap shot?
<p:panelGrid style="width: 100%;">
<p:row>
<p:column rowspan="7">a</p:column>
<p:column rowspan="5">b</p:column>
<p:column>e</p:column>
</p:row>
<p:row>
<p:column>f</p:column>
</p:row>
<p:row>
<p:column>g</p:column>
</p:row>
<p:row>
<p:column>h</p:column>
</p:row>
<p:row>
<p:column>i</p:column>
</p:row>
<p:row>
<p:column>c</p:column>
<p:column>j</p:column>
</p:row>
<p:row>
<p:column>d</p:column>
<p:column>k</p:column>
</p:row>
</p:panelGrid>
Explanation:
Each row will try to place itself under the previous row where there is space for it (where a column is not spanning over multiple rows).
So after the first row: the next rows will be placed in the following positions:
But since you want the 6th and 7th row to have 2 columns, you need to add a second column to them.
Hopefully this clears it up a little.