Laying out a coach or coach view using the grid layout
You can layout a coach or coach view by using cells in a grid.
About this task
The grid layout is where you can arrange content using grids, containers, and cells.
A grid is a container that is 12 units wide. The actual width of each unit is variable and depends on the screen size. Within a grid, you can have containers and cells. A container groups related cells. Cells are placeholders for content. Containers and cells can be from 1 to 12 units wide. If the container does not have at least one cell, the Designer removes it. In the following diagram, the grid is the outermost line. The grid contains a single cell and a container with an additional two cells.
If the total width of the cells in a grid is 12, the grid forms a complete row. When you edit a cell in a complete row, the Designer tries to preserve the complete row by automatically resizing other cells. That is, if you delete a cell, another cell expands to occupy the space. Similarly, if you add a cell to the left or right of another cell, a cell shrinks to fit the new cell. However, there is a minimum size of 3 for new or automatically resizing cells. In this case, the Designer moves the end cell to form a new row. When you are editing a grid that has less or more than 12 units, the Designer does not automatically resize cells. The limit of 12 units applies regardless of the number of containers within a grid.
In addition to adding a cell to the left or right of another cell, you can add a cell above or below it. A grid does not have a vertical limit. However, having too many vertically stacked cells results in a user interface that requires users to do a lot of scrolling.
On the General page of the Properties tab, you can set the grid layout properties that are described in the following table.
Property | Description |
---|---|
Horizontal span | Specifies the number of horizontal units that a selected grid cell or container occupies in a grid. A grid is a maximum of 12 horizontal units wide. You can specify a number from 1 to 12. If you increase or decrease the horizontal span, the width of the selected grid cell or container will increase or decrease on the right side of its current position. |
Visibility | Specifies whether a grid cell or container is displayed or hidden in a grid. This property
has the following options:
|
Orientation | Specifies whether the layout items in a selected grid cell are laid out horizontally or
vertically. This property has the following options:
|
Horizontal alignment | Controls the horizontal alignment of layout items in a selected grid cell. This property has
the following options:
Note: Horizontal alignment is not available for layout items in a selected grid cell unless the
orientation is horizontal.
|
Vertical alignment | Controls the vertical alignment of content in a selected container or grid cell, such as the
grid cells in a container or the layout items in a grid cell. This property has the following options:
Note: Vertical alignment is not available for layout items in a selected grid cell unless the
orientation is horizontal.
|
Control ID | Specifies an alphanumeric identifier that uniquely identifies a selected layout item. This ID can be used to locate items in JavaScript and advanced preview artifacts. |
To lay out a coach or coach view using the grid layout, use the instructions in the following procedure.
Procedure
Results
Example
- Start by adding the Header Footer grid template to the layout.
- Because you want items in the header and footers to be arranged horizontally to each other, click the change layout direction button in the center of the cell for the header and footer cells.
- Select the center cell and then select the Add icon to the right of the cell. When you hover over the icon, the boundary displays where you are adding a cell. Add a third cell to the row.If you go too far to the right, the boundary will include all three cells and you will add a large cell to the right. If you add this cell by accident, select it and press the Delete key.
- To make more room for the middle cell, hover over the right border of the left cell until you see the double arrow cursor. Drag the border. As you start to drag, you see the unit grid. Drag the border to the second unit..
- Save your changes. The layout is now ready for content so click Content. The cell borders display until you add content to them.