Panel layout styles

XY layout (default)

In XY layout, fields have a set location specified by X and Y coordinates, as well as a width and height. In earlier releases, the only way containers could determine where to place fields within them was to use these absolute positions and sizes. This layout style is now the default for each container.

Fill layout

Fill layout is applicable only to forms viewed in a browser and not displayed at design time in Developer Studio. At runtime, this style enables

• The screen's layout to be automatically readjusted when the browser window changes its size
• The contents of panels in a splitter panel holder to readjust their layout when a user moves the splitter

When fill layout is used, the container ignores the field's XY width and height properties at runtime. Instead, each field takes up the container's entire width. The container's height is equally divided by the number of visible contained fields (for example, if you have three fields, each one gets 33% of the container's height). The first field is placed at the 0,0 location and the remaining fields appear in sequence in a vertical orientation. Typically, you place one field in a container that uses fill layout, and that field gets 100% of the width and height.

Using fill layout for a form view enables the screen to dynamically adjust to changes in the browser window size. Typically, the view contains a single panel holder.

Setting a panel to fill layout is useful in these situations:

• The panel contains a nested panel holder.
• The panel contains a field (list view table, tree view table, form view, or data visualization) that can make good use of resizing.

You can select fill layout for a panel either by setting the Layout Style property to Fill or by right-clicking the panel and choosing Apply Fill Layout from the menu. The Apply Fill Layout menu selection is available only for standalone panels or panels in panel holders; it is not available for views.

If you use fill layout for a panel that includes a table, set the Auto Fit Columns property to False to enable all columns in the table to be visible with a horizontal scroll bar if the table size is larger than the container size.

Flow layout

When flow layout is used instead of the default XY layout, it enables you to stack fields vertically in a panel. In this layout, developers have the option of configuring the margin for the panel and the vertical spacing between fields within the same container. Fields cannot exist side-by-side; they can only be above or below other fields in one column. This is helpful when you include fields that can be dynamically resized in a panel, such as rich-text-formatting (RTF) fields or table fields. As the user enters text, the field expands or contracts and all of the fields move up or down vertically. See Adding rich-text-formatting capabilities to a character field.

When tables and view fields are contained in a parent panel which uses flow layout, the table and view fields grow vertically and fill horizontally based on their content. Panel and panel holder fields only fill horizontally. Data fields, such as integer and character fields, do not resize.

Flow layout at view level enables table fields to grow or shrink vertically based on the number of rows in the table. The width of the table is limited by the view width. As the table fields dynamically resize, the fields below them either move down or shift up to avoid empty space. As the table grows and pushes the underlying fields down, a scrollbar appears at the container level. This helps prevent multiple scrollbars within a panel.

Table fields in flow layout growing or shrinking in a container

Table fields in flow layout shrinking in a container

If a panel in a collapsible panel holder is set to flow layout, and Fit to Content is True, then the panel will grow or shrink based on its content (that is, there will never be white space inside the panel). Some field types do not display in a flow layout, such as a toolbar, splitter, results list, or query bar. For more information, see Avoiding-scroll-bars-in-panels.

If you use flow layout in a tabbed panel, background images are shifted from their specified vertical and horizontal position (for example, top-left) to an incorrect position when the form is displayed in a browser. For more information about tabbed panels, see Panel-holder-display-types.
You can select flow layout for a panel either by setting the Layout Style property to Flow or by right-clicking the panel and choosing Apply Flow Layout from the menu. The Apply Flow Layout menu selection is available only for standalone panels or panels in a panel holder.

You can also select flow layout for a form view by setting the Layout Style property to Flow.