Layout Options

In Caspio Bridge, 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:

SettingDescription
PaddingSpecifies the spacing between the border of a container and its contents.Format: top right bottom leftExample: 1px 1px 0px 4pxYou 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)
MarginSpecifies the spacing between the border of a container and the parent container.Applies to: Outer Container in Results pages (the spacing between the table's border and the browser window), Heading1 (h1), Heading2 (h2), Heading3 (h3), Paragraph (p)
Table WidthSpecifies 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.
CellspacingApplies to Outer Container in List/Grid Layout only and specifies the distance between the individual record cells.
Container WidthApplies 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 WidthSpecifies 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
AlignmentSpecifies 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 AlignmentSpecifies 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 TextCheck 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 WidthSpecifies 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)