9,291
edits
Form: Difference between revisions
Jump to navigation
Jump to search
→Table
(→Table) |
|||
| Line 491: | Line 491: | ||
=== Table === | === Table === | ||
To ensure that your fields are displayed exactly as designed, use the '''Add Table''' function. You lose some of the flexibility compared to Auto Grid, but the same table is rendered on all devices (except Windows 7 where the table is ignored | To ensure that your fields are displayed exactly as designed, use the '''Add Table''' function. You lose some of the flexibility compared to Auto Grid, but the same table is rendered on all devices (except Windows 7, where the table is ignored: one field is displayed per row). | ||
# Select a form tab and | # Select a form tab and drag '''Table''' from the '''Fields & Components''' pane to the tab. | ||
# | # Select the table, and on the [[Form#Properties_pane|'''Properties''' pane]], use the + and - buttons to define the number of columns and rows.<br>[[File:Table properties.png|600px]] | ||
#* Column width: You can specify the width of each column, either a fixed width (in pixels) or flexible width (using stars notation). To increase the width of a flexible column, add a number before the star; a 2* column is twice as wide as a 1* column.<br><small>The maximum width of the table is equal to the width of the form tab. If the table contains at least one column with a flexible width, the width of the table is set to the page width. To calculate the width of flexible columns, we subtract all fixed-width columns from the form tab width and distribute the remainder evenly.</small> | #* Column width: You can specify the width of each column, either a fixed width (in pixels) or flexible width (using stars notation). To increase the width of a flexible column, add a number before the star; a 2* column is twice as wide as a 1* column.<br><small>The maximum width of the table is equal to the width of the form tab. If the table contains at least one column with a flexible width, the width of the table is set to the page width. To calculate the width of flexible columns, we subtract all fixed-width columns from the form tab width and distribute the remainder evenly.</small> | ||
#* Row height: Use Auto for automatic height calculation | #* Row height: Use Auto for automatic height calculation or enter an exact pixel size.<br><small>The automatic calculation uses the maximal height of the blocks in the table row. That means either the height of text in a particular font or the height of an image (the image height might be scaled automatically to fit into a particular width).</small> | ||
# Add fields to the table (make sure they are actually inside the table element). | # Add fields to the table (make sure they are actually inside the table element). | ||
# Select each field and on the '''Properties''' pane, select the table cell(s) to define the '''Position in table'''. Note that you can click and drag across multiple cells.<br>[[File:Item position in table.png|600px]] | # Select each field and on the '''Properties''' pane, select the table cell(s) to define the '''Position in table'''. Note that you can click and drag across multiple cells.<br>[[File:Item position in table.png|600px]] | ||
# Sample table in the app:<br>[[File:Grid item example.png | # Sample table in the app:<br>[[File:Grid item example.png]] | ||
See also: [https://blog.resco.net/2020/05/11/new-form-table-designer-guide/ Form table designer guide] {{Badge|Blog}} | See also: [https://blog.resco.net/2020/05/11/new-form-table-designer-guide/ Form table designer guide] {{Badge|Blog}} | ||
[[Category:Woodford]] | [[Category:Woodford]] | ||