A section is a container you can drag other controls into (including other sections).
It's made up of cells that can be divided into rows, columns. This is where you can drag and drop objects and fields, and order them the way you want them to appear for your users.
By selecting a section, you can edit its properties, which is divided into settings and style.
Section Properties
NOTE: There is a difference between the properties for the section, and the properties for each individual cell within the section. Misclicking may bring up the wrong properties.
To get the section properties, click on the section header (the light gray part as shown below). You will be able to configure its settings and styles. A section does not have any events associated with it.
SECTION SETTINGS
Caption: You can set the name of the section to display on screen. Also used to uniquely identify it within actions.
Show Header/Title Bar: Checking this will show the caption on the live screen as well as a header bar which will allow a Method user to expand and collapse the section. Unchecking will hide the header/title bar.
Load State: This determines the initial load state of the section. There is one more state available for sections: Collapsed. If set to collapsed, the section is collapsed when the screen loads and would need to be manually expanded.
Responsive Layout: A responsive website automatically changes its layout as the browser window resizes, adapting for more or less visual real estate. A section will collapse its row cells into one column when set to responsive:
Don't Collapse: section will not collapse
Collapse for tablet & phone: collapse when viewed on tablets and phones
Collapse for phone: collapse when viewed on phones, not tablet
Section Width: Set the width of the section based on either pixels or percentage of the total screen. The vertical height of a section is dictated by the height of other controls put in it, so there’s no tool for manipulating that dimension.
SECTION STYLE
NOTE: Method’s color palette assigns names based on how it may be used - so instead of calling a color “red”, we call it “alert” and so on. They’re designed to make sense and keep your app consistent with Method’s suite of existing apps.
Section - Background color: Color the background of the section, but not the header.
Header Colors: This gives you the option of customizing everything about your header: the background color, the color of the header text, the text size and alignment. Only visible if you’ve chosen to make the header visible.
Toggle Arrows: Used to collapse and expand sections.
Toggle Arrows: Choose between Regular, Chevron, Circle Chevron, Circle Arrow, Angle Arrow, Double Angle Arrow
Toggle Arrow Alignment: Place the arrow on the extreme right-hand side of your section, to the right of the section header text, or the left.
NOTE: Your toggle arrow will disappear if you hide your header, so if you want your toggle arrow to appear but you don’t want a section title, just leave your caption blank! Then you can set your toggle arrow to the right or the left as you prefer (obviously right of text will just default to left if there’s no text!)
Toggle Arrow Colors: Change the color of your toggle arrow (from the same standardized palette as the background colors)
Padding: For more information on padding, see our article on Styling Basics.
Border: Assign borders to the section for the top, bottom, left, and right sides of the section. You can customize their size (in pixels), color (from the same standardized palette as the background colors), and style (dash, dotted, double, or solid).
Section Cell Properties
If you are familiar with Microsoft Excel or other spreadsheet programs, you already know what cells are - they’re the little boxes that make up rows and columns. Since sections can be assigned rows and columns, that means sections can have cells - and each cell can be individually configured.
As mentioned before, there is a difference between the properties of the section cell and the properties of the section itself. In order to set the properties of the cell, you have to select the cell, as shown in the image below.
CELL SETTINGS
Cell Alignment: This refers to where the objects and fields inside the cell are positioned - you can align them to the top, bottom, left, right, or any of the four corners.
Row Height: Change the height of the row your cell is located in, in pixels or percent of the total section. Applies to all cells in this row.
Column Width: Change the width of the column your cell is located in, in pixels or percent of the total section. Apply to all cells in this column.
Collapse as small as possible: This checkbox will shrink your cell down to the minimum size it can possibly be while still containing the controls you’ve dragged into it. Keep in mind this only refers to column width, not row height.
CELL STYLE
The style properties for the cells are exactly the same as the ones for the section itself — they just pertain strictly to the cell you’ve selected. Keep in mind you can’t select and make changes to multiple cells at once — each cell must be customized individually.
Section Cell: Background Color
Padding: Left/Right/Top/Bottom
Top Border: Size, Color, Style
Bottom Border: Size, Color, Style
Left Border: Size, Color, Style
Right Border: Size, Color, Style