You can drag the Group Panel component from
the Palette's Layout category to the Visual Designer to create a panel that groups
other components visually. After you drag the Group Panel to
your page, you can add components by dropping them on the Group
Panel.
If you want more precise control of component placement or you want a container that renders visibly, use the Grid Panel component.
There are a number of ways to position the components in the Group Panel:
In the page bean, a Group Panel component is a PanelGroup
object.
By default the Group Panel component is rendered as a <span>
element surrounding the group of child
components. If you want to set the size of the Group panel, you can change the rendered element to a <div>
by setting the block
property to true
. When you use a <div>
, the
page separator, if any, is displayed on a new line, and you can use the CSS styles width
and height
in the style
property to set the size. If you use a <span>
, any such settings are ignored.
<br/>
, that component is always
displayed on its own line. The behavior of child block elements is
independent of the setting of the block
property.