Left sidebar
Left sidebar
Left sidebar
Download DFM file
This is an example of a liquid layout having the page height self-adapted according to the text lenght.
This lets you to use external script (eg. SnippetMaster) to edit content from back-end and always have the height of the page automatically updated.
You can also use a content editor like FusionNews to create contents directly in the back-end.

This label (Label1) is anchored to the Top and Bottom parent edge and at the same time, the height is set to "Auto Height". These are the base conditions to facilitate the liquid layout (additionally, alignment must be set to either "Full Parent" or "None")

The rationale of the "liquid layout" concept now is, that if the text content is set by a external data source, the label grows its height because of the "Auto Height", but to enforce a constant distance to the bottom and to the top, the parent container panels (in here these are Page1 and Panel1) are increased or decreased in size to satisfy these contraints.

Thus, the "liquid layout" design can be used in DFM2HTML by a combination of settings in the Pos tab. Theoretically, the same could be done for a liquid layout mechanism in horizontal direction, but it was not asked for by now.

The liquid layout requires javascript to be enabled as it cannot be modelled with using CSS alone. Also, if the content of the "liquid label" is changed after the page is already loaded, "AdjustHeight(label-object)" has to be called on the label whose content is changed, as done by the upper left button. The lower left button demonstrates when javascript would be disabled: a scrollbar is displayed by "Page1". (Note that only Page objects not being assigned to page controls have the ability to display scrollbars.)
The footer panel is in position "bottom" inside page1 underneath the other contents
The header panel is in position "top" inside "panel1"