The appearance of the form in the form editor may differ from the actual appearance of the form.
Representation of the form in the form editor:
Actual representation of the form:
Cause
The elements of a form get their rendering from their corresponding *TemplateProvider. For example, for the HTML element shown in the images, this is the tl:StaticHTMLTemplateProvider. Many of these template providers ignore whether the element should be displayed over the whole width or not.
Instead, the content of the element is always wrapped in a div element with the CSS class rf_line. The CSS class rf_line ensures that the corresponding form element assumes the width of the form.
For the preview in the form editor, this tl:HTMLTemplateFragment for displaying the form element is wrapped in an HTML DocumentFragment specifically for the form editor. The root node of this fragment is a div with the CSS class cFormEditorElement. However, here we respect whether the form element should be rendered across the full width of the form. If yes, it gets the class rf_line in addition to the class cFormEditorElement.
Corresponding CSS selectors, which set the width of the element depending on whether the CSS class rf_line is present or not, ensure in the end that the form is rendered "correctly" in the editor, but the productive view is incorrect.
Test
Design a form with a group of 4 elements (see screenshots). Use an HTML element or a free space as the third element. If none of the elements is displayed over the whole width of the form, then the display of the productive view should be that of the preview of the form editor.