defect
The form's appearance in the Form Editor may differ from how the form actually appears.
Appearance of the form in the Form Editor:
Actual appearance of the form:
Cause
The elements of a form derive their appearance from their corresponding *TemplateProvider. For the HTML element shown in the images, this is, for example, the tl:StaticHTMLTemplateProvider. Many of these TemplateProviders ignore whether the element should be displayed across the full width or not.
Instead, the element’s content is always wrapped in a div element with the CSS class rf_line. The CSS class rf_line ensures that the corresponding form element adopts the width of the form.
For the preview in the form editor, this `tl:HTMLTemplateFragment` is wrapped in an `HTML DocumentFragment ` specifically designed for the form editor to display the form element. The root node of this fragment is a `div` with the CSS class `cFormEditorElement`. However, this takes into account whether the form element should be rendered across the entire width of the form. If so, it receives the class `rf_line` in addition to the class `cFormEditorElement`.
Corresponding CSS selectors—which set the element’s width depending on whether the CSS class `rf_line` is present or not—ultimately ensure that the form is displayed “correctly” in the editor, but result in an incorrect display in the production view.
Test
Design a form with a group of 4 elements (see screenshots). Use an HTML element or a blank space as the third element. If none of the elements is displayed across the full width of the form, then the production view should match the preview in the form editor.