This type of container is made up of cells that can be divided into rows, columns, and even smaller sections. This is where you can drag and drop objects and fields, and order them the way you want them to appear on the live screen. Each section has a properties menu that appears on the right nav when you select the section on your canvas, divided into settings and style.
Note, there is a difference between the properties for the section, and the properties for each individual cell within the section. To get section properties, click on the section header (the light gray part as shown below).
- Caption: You can set the name of the section to display on screen. Also used to uniquely identify the object 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 load state 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 how much stuff you put in it, so there’s no tool for manipulating that dimension.
Note: A note on the style section: Method’s color palette assigns names to their colors that denote where our best practice says they’d be most useful - so instead of calling it “red”, we call it “alert” and so on. They’re designed to make sense and keep your app looking great (and in step 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 Settings
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 section itself. In order to set the properties of the cell, you have to select the cell, as shown in the image below.
- Cell Alignment: This refers to the objects and fields inside the cell - 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.
Section 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