Fully Responsive
Fully Responsive
Overview
When creating a form, one must always select a layout type. Advanced (Responsive) is the most complex layout manager, but allows developer the greatest flexibility to dictate how components and containers respond to different form sizes.
How it works
Advanced (Responsive) is the most complex layout manager, differently from the Simple CSS, you don't define the exact location and the size in pixels with simple drag and drop; instead you will create a layout stucture with Layout Containers nesting components into them. Location and dimension of the components, as well how it responds to changes of the Browser size, is determined by the structure you create with Layout Containers, the custom style you may apply and for certain components by the actual content of the components; for instance a label containing a long text can overflow to the next line instead of having the text cutted.
Advanced (Responsive) vs Simple CSS In most cases it is recommended to use Simple CSS, but Advanced (Responsive) is purposed for specific situations:
for applications that need to show/hide components at different scales
for applications where the layout should respond to the internal content, etc.
Other Layout Containers
On addition to the Bootstrap Grid system there are several Layout Containers which can be combined to build a complex responsive form:
Mixing Simple CSS and responsive forms
Here is the webinar section that covers mixing Simple CSS and Responsive forms:
CSS Position Container
The CSS Position Container is a special container which can be used to create as a Simple CSS a block of the Advanced (Responsive) Form offering a great flexibility for the design of your form.
To edit the content of the CSS Position Container is requested to use Form Editor Zoom mode which strips out from the editor any outer layout container and allows you to work only with the Zoomed section; as soon you drop a CSS Position Container into the Form you are requested to Zoom in for editing; you can Zoom out any moment using the Zoom Out icon and come back to edit the content of the CSS Position Container using the Zoom In icon.
You can place any component into the CSS Position Container as if is a Simple CSS Form, therefore using same rules; the location of the elements in it will be relative to the CSS Position Container block.
Set the size property width and height to control the height and the minimum width of the CSS Position container.
Constraints : can be edited only when Zoom in Form Editor, the contained elements cannot be moved into a different container.
Webinar section for CSS Position Container:
Create a CSS Position Container
These are the steps for creating a CSS Position Container:
Open the Form Editor of your responsive form
Find CSS Position Container in Templates subsection of the Bootstrap 12-Grid section in the components' pallet
Click on the "Yes" button of the pop-up that appears after adding the CSS Position Container, in order to get into Zoom mode and be able to edit the content of the component
While in Zoom mode you can add and edit other needed components available for Simple CSS forms
Nesting responsive forms
In responsive layouts, when you nest multiple forms using tab panels or other types of container-components it may happen that a tab/child form that has in it directly "row" layout containers (so no root layout "container" or layout "container-fluid") shows unwanted scroll-bars. That happens because bootstrap requires that all 'row' divs must either be put in a 'container', a 'container-fluid' or in a 'column', while in the case of a tabpanel for example the parent DOM Element is just some intermediate div. Because 'row' has negative margins of -15px and parent intermediate div might not have padding of 15px, the scrollbars can appear (if that div has overflow: auto). For example:
The problem does not appear when a 'row' is inside a 'column', a 'container' or a 'container fluid' - because those have a padding of 15px defined. However, bootstrap doesn't allow nesting of containers in it's layout docs - so adding a container layout as root of child/contained form is not an option. But as the tabpanel might want to contain absolute forms as well (for example), that intermediate div cannot always set a 15px padding - as that might not be necessary... So we just need to change the margins of such rows as in the rule below (that is included already in "standard_ngclient.css"):
Last updated
