Avoiding scroll bars in panels
When the contents of a panel exceed its viewable area, the panel displays a vertical scroll bar. If the panel is in a panel holder whose contents exceed its viewable area, the panel holder also displays a scroll bar (see the following figure).
If the panel holder has several panels that need scroll bars, the result can be too many scroll bars. Multiple scroll bars distract users, require additional time to display contents, and detract from the appearance of the panel holder.
Multiple scroll bars in a panel holder
Even if you enlarge the panel holder to accommodate more content, individual panels still might display scroll bars.
See the sections below for ways to avoid scroll bars.
Defining the order
To avoid scroll bars in panels, you can define the order (priority) in which panels in a panel holder can access the panel holder's available white space. This white space is called slack, and the priority by which it is allocated is called slack distribution order.
Slack distribution order enables you to allocate slack to the panels that need it most. For example, you might have a panel holder with three panels, one of which contains a table that you want users to scan easily with little or no scrolling. You can give this panel the highest slack distribution order so that it will have first access to the available white space in the panel holder.
Slack distribution order applies only to panels in collapsible and splitter panel holders; it does not apply to panels in tabbed and accordion panel holders because they display only one panel at a time. Slack is available only on forms displayed in a browser.
The slack distribution order value is a positive number between zero and 100. The higher the number, the lower the priority for allocation of slack. A value of zero (the default) is the highest slack distribution order.
Slack distribution order
The panel with the highest priority gets the slack, up to the maximum size set in the panel's properties (see the above figure). A panel with a dynamic maximum size gets slack until all of its contents fit in the panel without a scroll bar appearing. Any remaining slack is distributed to the next visible panel in the slack distribution order.
Panels in a panel holder with the same slack order have slack allocated or denied in a round-robin fashion until all the panels reach their maximum size.
Using Fit to Content to dynamically resize panels
The Fit to Content option in panels, when set to True, enables panels to be resized at runtime based on changes to their content. For example, if a panel includes a table to which rows are added, the panel can be enlarged without having a scroll bar added. This feature extends that capability to view fields that contain forms.
The following figures show a panel in a view field. The following figure shows the appearance of a scroll bar when rows are added.
Panel with scroll bar
The following figure shows the panel after it was resized, which removed the scroll bar.
Panel resized to remove scroll bar
Consider the following points when using the Fit to Content option:
- It includes hidden fields.
- It is available only to collapsible panels.
- It can be used to allocate positive slack.
Including space for panel elements
Another way to avoid scroll bars in panels and panel holders is to include sufficient space for the following elements when you design your forms.
Field type | Element | Size |
|---|---|---|
Panel | Border thickness | 0-9 pixels (adjustable). See Creating-panels. |
Header height | 20 pixels (fixed). | |
Panel holder | Border thickness | 1 pixel (fixed). See the Borderless property description in Field-Properties. |
Margins | 0-9 pixels (adjustable). See the Margin Bottom, Margin Left, Margin Right, and Margin Top property descriptions in Field-Properties. |
For example, suppose you create a borderless panel holder that has 9-pixel margins on all sides and whose panels cover all its remaining space. If you then make the 1-pixel borders visible, you must change the thickness of all the margins to 8 pixels to prevent scroll bars from appearing in the panel holder.
Using flow layout to avoid multiple scroll bars
When set to Flow, the Layout Style option in panels enables table fields to grow or shrink based on their content. If a container includes multiple tables and a table field grows, the table fields dynamically resize. This prevents empty space from resulting in a new single scrollbar within the container. For more information about this option, see Flow layout.