icon 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.

Grid container

Our Grid is based on Bootstrap v4 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.

Grid Cell Alignment property

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.

Grid Cell Offset property

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.

Grid Cell Width property

Padding

Allows you to give extra padding to a particular element from any side, Padding is set in pixels.

Grid Cell Padding property

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.

Grid Cell's class

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.

Grid Cell's style

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:

Width property

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.

Stacked property

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.

Grid's class

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.

Grid's style

You can apply different styles to the container. For example, the following style will add a blue background to the grid:

background-color: #008EFF;