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.

Bootstrap 12-Grid Layout

• Container

• Row

• Column

Bootstrap 12-Grid Layout Templates

• Row-With-Column
• Label-And-Field
• Responsive-Form-Template

Flexbox

• Flex-Container
• Flex-Item
• Flexbox Layout

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:

• Custom Div
• Collapsible Container
• Simple Collapsible
• Center Container
• Inline Group Container

Mixing Simple CSS and responsive forms

Here is the webinar section that covers mixing Simple CSS and Responsive forms:

Webinar

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.

Simple CSS

Webinar section for CSS Position Container:

Webinar

Create a CSS Position Container

Create a CSS Position Container

These are the steps for creating a CSS Position Container:

1. Open the Form Editor of your responsive form
2. Find CSS Position Container in Templates subsection of the Bootstrap 12-Grid section in the components' pallet

3. Drag and drop the CSS Position Container component inside any other container components, except Container, Row
4. 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

5. 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:

 container  
     row  
          column  
               div style="overflow: auto" // the intermediate div of container-component  
                   row // results in a scrollbar because of margin -15px  
                       columns  

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"):

div:not(.container):not(.container-fluid):not([class^="col-xs-"]):not([class^="col-sm-"]):not([class^="col-md-"]):not([class^="col-lg-"])
 > .row {
    margin-right: 0;
    margin-left: 0;
}