GroupBoxLayout

LIVE DEMO

GroupBoxLayout is a container that displays a frame around its components with an optional caption. Additionally, it can collapse the content.

group box default

Component’s XML-name: groupBox.

Basics

Usage example:

<groupBox caption="Vertical GroupBox"
          spacing="true"
          width="AUTO">
    <label value="Label"/>
    <textField inputPrompt="TextField"/>
    <button caption="Button"/>
    <button caption="Button"/>
</groupBox>

By default, the groupBox container is 100% wide, similar to vbox.

Attributes

  • caption - defines the group header.

  • orientation - defines components placement direction − horizontal or vertical. The default value is vertical. Horizontal orientation is shown below:

    group box horizontal

  • collapsable - if the value is set to true, the user can hide the component’s content using a button in the top-left corner.

    group box collapsable

  • collapsed - collapses component’s content initially if set to true, works with collapsable="true" attribute.

  • showAsPanel - if set to true, the component will look like Vaadin Panel. The default value is false.

    group box panel

  • outerMargin - sets the outer margins outside the border of groupBox. If set to true, the outer margins will be added on all sides of the component. To set the outer margins for all sides individually, set true or false for each side of groupBox:

    <groupBox outerMargin="true, false, true, false"/>

All XML Attributes

align - box.expandRatio - caption - captionAsHtml - collapsable - collapsed - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - enable - expand - height - htmlSanitizerEnabled - icon - id - orientation - outerMargin requiredIndicatorVisible - responsive - rowspan - showAsPanel - spacing - visible - width