Show TOC

Truncated Content in the FormLayoutLocate this document in the navigation structure

Use

Unlike with other layouts, in FormLayout all contents that are larger than the surrounding layout cell are truncated. This happens particularly with all texts (for example, Label, TextView, Caption). If text is truncated, an ellipsis (...) is displayed, provided the browser permits this (the Firefox browser currently does not).

Example

In component WDR_TEST_FORM_LAYOUT there is a container with FormLayout at the top right. In the container the Label is truncated and an ellipsis is displayed.

Example of an Ellipsis in MS Internet Explorer

In all other layouts (MatrixLayout, RowLayout, FlowLayout, GridLayout) the layout cells are big enough so that the whole of the content is visible. Even if a smaller width and height has been selected for the layout cell (for example, width and height of MatrixData) than the size of the content, the content expands the cell. Width and height are therefore to be seen as the minimum width and height.

On the one hand, this means that all content is fully visible (provided it fits in the visible area of the browser window). On the other hand, content that is too big can lead to distortion of the layout, and make it difficult or even impossible to harmonize the alignment of UI elements in different containers.

Whereas the dimensions of the layout cells in a FormLayout are fixed, and cannot be expanded by the content. This makes it possible to create a UI that is more standardized and provides UI elements with the same alignments.

A similar phenomenon happens with UI element Table: If you have deactivated property fixedTableLayout, the contents of the table cells are always expanded. The widths of the table columns act as minimum widths. If you have activated fixedTableLayout, you get the behavior of the FormLayout: The table column widths are fixed. If a cell editor is larger, it is truncated, and with an ellipsis if the browser permits.

Note

If in a FormLayout with a Label in front of a UI element the required asterisk (property state.required) is displayed on the right side of the Label, and the browser window is too small (too narrow), the required asterisk will also be cut off as part of the truncation of contents function. We therefore recommend that in the FormLayout you use URL parameter WDUIGUIDELINE=GL20 to move the required asterisk to the left side of the Label.

Since texts in the FormLayout can be truncated, it is especially important to define Tooltips . We recommend you display the text again, for instance as a tooltip.