Layout Options

3 minutes to read

In Caspio, you can customize the style of individual field values to your desired choice. Edit the Style associated with the DataPage. On the Define Style Settings screen, in the DataPage Elements section, click Layout on Form/Details (for Forms and Details Page) or Tabular, List/Gallery, Calendar (for Results Page).

You can customize the settings of various elements listed in the Element Type. Some of the options for the Layout section are explained here:

Setting	Description
Padding	Specifies the spacing between the border of a container and its contents. Format: top right bottom left Example: 1px 1px 0px 4px You can enter only two values to specify vertical and horizontal padding, or one value to set equal padding on all four sides. Applies to: Text Fields, Text Areas, File Fields, Label Cells, Field Cells, Buttons Cells, Data Cells, HTML Block Cells, Header Cells, Record Action Column, Data Download Layout, Paging Layout, Heading1 (h1), Heading2 (h2), Heading3 (h3)
Margin	Specifies the spacing between the border of a container and the parent container. Applies to: Outer Container in Results pages (the spacing between the table border and the browser window), Heading1 (h1), Heading2 (h2), Heading3 (h3), Paragraph (p)
Table Width	Specifies the width of the table, either absolute (in px) or relative to the available horizontal space (in %) or the width of the current font’s ‘m’ character (in ems). Applies to: Outer Container in Results Pages, Paging Layout.
Cellspacing	Applies to Outer Container in List/Grid Layout only and specifies the distance between the individual record cells.
Container Width	Applies to Data Download Layout only. For Data Download, you specify the width of the visible container instead of the entire table width. This enables right alignment of the Data Download control on the page. To ensure correct alignment, the Same as Results Table checkbox must be checked to keep the width of the entire table same as the Results table.
Cell Width	Specifies the width of the table, either absolute (in px) or relative to the available horizontal space (in %) or the width of the current font’s ‘m’ character (in ems). Applies to: Label Cells, Field Cells, Data Cells, Header Cells, Record Action Column
Alignment	Specifies how contents are aligned in the cell, horizontally and vertically. Click the ellipsis (…) button to bring up the picker and click the desired alignment icon. Applies to: Confirmation Messages, Label Cells, Field Cells, Buttons Cells, Data Cells, HTML Block Cells, Header Cells, Record Action Column, Data Download Layout, Paging Layout
Text Alignment	Specifies how text is aligned on the page or within a container. Click the ellipsis (…) button to bring up the picker and click the desired alignment icon. Applies to: Error Messages, Buttons
Wrap Text	Check this to wrap any long text in the container. Applies to: Label Cells, Field Cells, Data Cells, HTML Block Cells, Header Cells, Record Action Column, Data Download Layout, Paging Layout
Line Width	Specifies the spacing between adjacent lines of text (similar to Line Spacing in text editors where 100% would be Single and 200% would be Double). Applies to: Paragraph (p)