Home
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.
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.
This is the bootstrap 12 grid layout package for making responsive forms. It is meant to work with the bootstrap components package or any other compatible component packages. You can build a responsive layout for your form using this combination or components and layouts. 12grid is based on bootstrap grid system, see https://getbootstrap.com/docs/5.0/layout/grid/ for more details.
See below the Layout Containers which can be found within the Bootstrap 12-Grid Layout package.
Container, based on the Bootstrap Container is used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
Constraints : A Container can be dropped only at the root of the form layout and can contain only Row, therefore you will be allowed to drag & drop into it only Row layout or templates starting with rows ( e.g. Row and 1 Column, Label and Field.. ).
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.
Constraints : A row can contain only Column containers.
Columns are at the core of the 12 Grid Layout system. Nested within Row containers, they can divide the parent row's width to up 12 blocks of same relative size, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.
Constraints : A column can contain any component and any layout containers except for Container, Column or Flex Item.
Can nest rows into a column to further organize the layout
The following are ready to use layout templates based on the 12 Grid Layout.
A quick start for a 12 Grid layout. These 3 templates Row with 1 Column, Row with 2 Column, Row with 3 Column are row layout containing already 1, 2 or 3 columns in it equally sized.
A predefined template which comes with a row and 2 columns ( md-4 and md-8 ) having a Label component in the first column and a Textbox component in the second column.
A predefined layout of nested rows and columns; you can further edit it by adding or removing other layout containers.
The Flexbox layout containers are using the CSS3 Flexbox layout model; Flexbox is a one-dimensional layout method for arranging items in either rows or columns. The Flexbox layout involves a container ( Flex Container ) and one or more children ( Flex Item ). There are several properties which can be set in either the parent Flex Container or the Flex Item children using the Servoy properties view in the IDE.
Is the parent container of the Flexbox layout. It comes already with 3 Flex Item children; you can further add or remove any Flex Item. You can modify the layout using it's 3 unique properties:
- data-direction: determines if the flex items in it should be arranged as rows or columns.
- data-align-items: determines how the flex items are laid along the flex container.
- data-justify-content: determines how the available space should be distributed among the flex items.
Constraints : Can contain only Flex Item.
Below an example of flex container with data-justify-content set to space-around.
Flex items can be dropped into flex containers. As the flex containers, each flex item has it's own set of unique properties used to determine how the item is layout within it's container.
- data-align-items: determines how the flex items are laid along the flex container.
- data-grow: determines the ability of the item to grow, relatevely to other flex items, when there is more space available.
- data-shrink: determines the ability of the item to shrink, relatevely to other flex items, when necessary.
In the example below the first item from the left doesn't grow since has flex-grow=0. The middle item has flex-grow=1, the last item has the flex-grow=2 therefore grows twice as much of the middle flex item.
The flexbox layout uses the flexbox to divides the available height in 3 vertical sections, header, content and footer. The header and the footer section will grow in height depending on their content while the content section will take all the remaining height and show a scrollbar if the content doesn't fit.
On addition to the Bootstrap Grid system there are several Layout Containers which can be combined to build a complex responsive form.
A simple div, is the simplest Layout Container; can be used to divide the space in multiple blocks without additional rules.
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.
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;
}