ScrollBoxLayout

ScrollBoxLayout is a container that allows you to scroll the content.

scroll box default

Component’s XML-name: scrollBox.

Basics

Example of ScrollBoxLayout with a textArea whose height exceeds the height of the scrollBox:

<scrollBox height="150px"
           width="300px"
           spacing="true"
           caption="ScrollBox">
    <textArea height="600px"
              width="270px"/>
</scrollBox>

Attributes

scrollBars

scrollBars attribute enables configuring scroll bars. There are following possible values:

  • vertical - enables vertical scrolling, by default.

  • horizontal - enables horizontal scrolling.

  • both - enables scrolling in both directions

  • none - forbids scrolling in any direction.

If the size of the components inside the container exceeds the size of the container, the corresponding scrollbar will appear automatically.

Dimensions

  • contentHeight - sets content height.

  • contentWidth - sets content width.

  • contentMaxHeight - sets maximum CSS height for content.

  • contentMinHeight - sets minimum CSS height for content.

  • contentMaxWidth - sets maximum CSS width for content.

  • contentMinWidth - sets minimum CSS width for content.

For example:

<scrollBox contentMinHeight="200px"
           contentMaxHeight="100%"
           contentMaxWidth="AUTO"/>

It is recommended to set the content width and height. Otherwise, the components placed in the scrollBox should have a fixed size or default size. Do not set the size of nested components to height="100%" or width="100%" if the content width and height are not set.