Grid
The Grid container is the most basic element of Plumsail Forms. By default, every form already has a grid.
But you are not limited to one grid per Form. By placing Grid container inside the form, you are technically inserting one grid within another and then can lay out elements within second grid, which will be constrained by its own Parent Grid.
So, despite Parent grid only having 12 options for Width property, you can adjust your layout precisely by using multiple grid containers.
Our Grid is based on Bootstrap Grid.
Grid Cell Properties
Since the Grid is the base container, every element on the form has the following properties. Changing these properties affects a specific grid cell, not a specific field or control.
Alignment
Determines how to align elements inside of the grid cell. Four options are available: Justify, Left, Center, Right.
Offset
Determines how much of an offset element gets from the left. The offset number also determines how much of the total grid space offset takes, where 6 is equal to half the grid. Setting offset will also affect total available Width for the element, and if not enough space left, it will automatically adjust to be smaller.
Width
Determines how much width an element takes, where 12 is full grid and other values represent smaller portions of the grid. If you add new elements or adjust Width of other elements and run out of space, Width of elements to the right will automatically adapt in the designer, so make sure that your elements don’t take more than 12 total.
Padding
Allows you to give extra padding to a particular element from any side, Padding is set in pixels.
Class
Add a CSS class to the grid cell, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag.
Be careful with setting a class to a grid cell, as it’s set specifically for the cell itself. If you move the element inside the cell, the class will remain with the Grid Cell. It’s better to set the Class directly to a field or a control.
Here’s an example CSS code that you can use in Theme Settings → Custom CSS to give cells with your class a thin black border:
.my-class { border: 1px solid black; }
Style
Add custom CSS style to the grid cell. This will work as a style attribute for an HTML tag.
Be careful with setting a style directly to a grid cell, as it’s set specifically for the cell itself. If you move the element inside the cell, the style will remain with the Grid Cell. It’s better to apply the Style property directly to a field or a control.
You can apply different styles to the cell, for example, the following style will add a lightblue background to the grid cell:
background-color: #008EFF;
Grid Properties
Here you can find properties related to the Grid container.
Width
You can specify the Width of the grid in pixels:
If left empty, the grid will take all of the available space in the grid cell.
Stacked
Allows you to choose at what screen size items get stacked inside the grid: Never, Small, Medium, Large. Small by default.
Class
Add a CSS class to the container, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag.
The same class can be applied to multiple grids, and then you can use CSS to modify the appearance of these. For example, here we’ve used the following CSS code in the CSS editor to give grids with my-class a thin black border:
.my-class { border: 1px solid black; }
JavaScript
The Class property allows you to work with the grid via JavaScript code, like this:
fd.rendered(function(){
//hide the container
$('.my-class').hide();
//show the container
$('.my-class').show();
});
Style
Add custom CSS style to the container. This will work as a style attribute for an HTML tag.
You can apply different styles to the container. For example, the following style will add a blue background to the grid:
background-color: #008EFF;