Layout Grid

The Layout Grid is a container that you place other tools inside of to create compound structures such as the one below:

Layout Grid

The image above is actually comprised of three separate grids:

  • The first grid uses equally-spaced columns to contain the First Name, Middle Name, and Last Name fields.

  • The second grid contains only one column: the Address field.

  • The third grid contains the City, State, and Zip code fields. In this grid, the column sizes have been adjusted to give the City field 60% of the entire grid width, the State field 10% of the entire grid width, and the Zip code field 30% of the entire grid width.

Space has been removed above/below all three grids, forcing them together and giving the appearance of a single grid.


Grid label: The grid label will appear on the top of the grid in black.

Data name: Because this is a required field, doForms will default the Data name to match the Caption or Label. If these are blank, doForms will generate a generic Data name name with a sequential number (such as "untitled10"). Since it is used throughout the system, it is recommended that you enter a descriptive Data name that is easily identifiable. Nondescript Data names are difficult to find and select at a later time (e.g., when performing a calculation).

Vertical Captions: this setting allows users to turn their captions vertical instead of horizontal. This setting is great for when grid columns only need a small value entered and the user wants to fit a lot of columns one on screen. If a user has 15 columns that are horizontal they will not fit on 100% of the screen nicely but if you turn the captions vertical more columns can fit nicely in 100% of the screen.

Number of columns: If you simply drag elements into a layout grid, they will each be placed into individual rows. To place them into columns instead, use this Number of columns setting. For example, if you want City, State, and Zip code fields to appear in three columns, then set this field to 3, and then drag the three fields into the grid.

Grid type: There are three different grid layouts, each useful for different reasons:

  • No captions: This is the most powerful grid type, since you define each cell, and there is no structure beyond setting the number of columns. As you add tools into a grid, they start to fill the grid across the form and then down. For example, if you set the grid to two columns, the first tool you add will go into Row 1 Column 1, the second tool you add will go into Row 1 Column 2, the third tool you add will go into Row 2 Column 1, and the fourth tool you add will go into Row 2 Column 2.

    The image below shows an example of a "No Caption" grid:

    Layout Grid Example 2

    In a "No Captions" grid, the captions of the tools you add have no value. Therefore, if you add a text box to a grid and want a caption above it, you need to add a Label in the cell directly above that tool. This gives you the ability to create custom tables with embedded calculations and perform many other spreadsheet type functions using the various tools that are supported by the grid. In the example above, two blank labels (with their gridlines removed) have been added above the Take a photo of yourself/How did you take this photo? fields, which adds blank space within the free form grid.

  • Captions on top: Unlike the "No Captions" grid, a "Captions on top" grid is used primarily for creating forms in which each element requires a Label above it. When you add an element into this grid, the Caption of the element is automatically placed into the row immediately above it. The image below shows an example of a "Caption on top" grid:

    Layout Grid

    The grid in the image shown above is a "Captions on top" grid. If you set the grid to two columns, and then place two Text boxes into the grid, the grid will be two columns wide by two rows deep. The first row will contain the Captions, and the second row will contain the data entry fields.

  • Captions on side: This grid type places the Caption to the left of the data entry field. You need to define two columns for each element you want on a single line.

    Layout Grid Example 2

Fit to screen: This feature provides a level of device responsiveness as it attempts to force your container elements to fit within the available width of your device's screen. We say "attempts" because certain tools have minimum widths, and if a grid contained two tools with minimum widths that together were larger than your screen width, then the Fit to screen parameter would be overwritten. Otherwise, the grid will recalibrate the amount of screen real estate given to each element, based on the rules below. If Fit to screen is not selected, then the grid is allowed to stretch beyond the right border of your device's screen, which may be preferable if your grid contains a large number of elements.

  • Equally space columns: Attempts to divide the screen width of your device by the number of columns in your container. If you have two images and they do not fit then each will be set to the minimum width automatically.

  • Use caption length: This setting will attempt to use your tool's caption to set the width of the column. So a caption of "Total" (5 characters in length) would be given more screen width then "Qty" (3 characters in length).

  • Adjust column width: (The Fit to screen checkbox must be selected in order to use this option.) This option gives you the most control over how columns widths are set. When you select this option, a column setting field will appear in which you must enter values (separated by vertical lines) that equal 100%. For example, if you had a 3-column grid and wanted it to fit to screen with the first column equal to 50% of the screen, and the other two columns set to 25% apiece, you would enter the following in the column setting field: 50|25|25.

    You can adjust the layout grid width so that it widens past the width of the mobile device’s screen, thus allowing you to control the width of each column without constraining it to fit into the screen’s built-in width. By selecting a width from the drop-down list (100% to 300%), the grid will retain its proportional widths for each column, but the grid will stretch to the selected width (e.g., 200%) of the mobile device’s screen. Now, the user can now scroll horizontally to see the entire table, and data is less likely to wrap within table cells. See this document for more information on adjusting layout grid width.

  • Alter grid if screen is smaller than: This is another option that helps make your form responsive to the device it is being viewed on. If you enter a screen size in this field (measured in inches diagonally), then the grid format will be ignored for screens smaller than the entered size, and the elements in the grid will be listed in a single column, one underneath the next. This allows you to optimally support both tablets and small phones with the same form.

    Stacked - This option will reformat the grid into a single column and stack each field on top of each other. This option is most commonly used on devices with small screen sizes so users do not have to pane left to right in order to see all fields.

    Expand - This option will do the opposite of the stacked option. While stacked breaks the format of the gird and places the fields one on top of the other, expand makes the grids columns larger by a percentage that the user decides( options include 125%-300%). For exmaple, if the user says expand the grid if the screen size is smaller than 5 inches to 200% of the screen, my doForms app would reformat my grid to no longer try to fit to the device screen but instead expand to double to screen size (10 inches in this example). So now the user would be able to pane from left to right instead of seeing squished columns on a small device.

Justification: Allows you to apply text justification settings to certain elements of the tool. Choose the appropriate radio button for the Caption field as follows:

  • L: Left-justifies the text.

  • C: Center-justifies the text.

  • R: Right-justifies the text.

Remove Space: This parameter is used to remove the space just before and just after the tool. By removing space, two elements can be made to appear linked or as a single element.


Only display this question if
This is a very powerful option as it allows you to hide form elements, only exposing them if the answer to a question in your form meets the criteria you have set. Being able to hide fields unless they are needed makes form more user friendly. For example, if you have a Choose One question with the answers Yes and No, then you can say "Only display this form element if" the answer to the Choose One is "equal" to "Yes." You can combine criteria with other criteria, thus creating complex criteria for showing/hiding form elements.

Supported Tools

The Layout Grid may contain the following tools: