Truncated Content in Layouts

Use

In FormLayout and in GridLayout with property layoutFixed set, 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).

In all other layouts (MatrixLayout, RowLayout, FlowLayout, GridLayout if property layoutFixed is not set) 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 layout cells in a fixed layout (FormLayout and GridLayout with property layoutFixed set) 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.