The Layout Grid is a container that you place other tools inside of to create compound structures such as the one below:
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. (you can also use a text box with no grid)
- 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. It is recommended that you always use the adjust column width setting to control the size of each column in a grid.
Grid label: The grid label will appear on the top of the grid in black.
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:
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 grid lines 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:
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 the 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.
- Center grid: Centers the column(s) of the grid with padding on both sides. Specify the padding in Left padding and Right padding. Check No captions to hide the grid captions.
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.
Use vertical captions: Display the caption text vertically. Select the number of lines of text to wrap the captions. Selecting 1 will keep all the caption text in one line with no breaks, which results in the largest caption size. Selecting 4 will wrap the caption text into up to 4 lines of text, which results in the smallest caption size.
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: 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.
Screen size: 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.
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.
- Stack: 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 example, 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.