Skip to content

Layout Panel

Screenshot

Layout panels are used to add nested components and are best used within Flex Panel, Tab Control and Accordion components or to create elements like navigation menus.

Basics

Screenshot

Fill Height

When checked, autosizes nested components to fill the height of the Layout panel.

Tip

Enable after adding all required components to the panel

Advanced Layout

Best-fit component according to panel width; components stack on resizing. Positioning components with Advanced Layout requires CSS.

Fill Height versus Advanced Layout

Fill Height auto scales components to browser height. Advanced Layout requires CSS to position components. If both are enabled, only Advanced Layout rules will apply.

User Layout
User arrangement of components; add, remove and reposition.
  1. Enable User Layout. In View on Web mode (or "Quickview") the customization icon will be visible

    Screenshot

  2. Once enabled components will become movable and can be repositioned

    Screenshot

  3. Components can be deleted

    Screenshot

  4. And removed (and hidden) components can be returned (or added)

    Screenshot

  5. Once complete, click the settings icon

    Screenshot

  6. Save layout

    Screenshot

Floatable
When enabled, an added component will snap to nearest row anchor. Otherwise, component will always snap to top row.
Column Count
Row Count / Row Height

Define Layout grid size. Components added are locked in position to this grid. The grid is visible when a component is dragged into position.

Screenshot

Screenshot

Row Height

If Fill Height is disabled, Row Count becomes Row Height. Row Height is the height in pixels between each grid row. The number of grid rows used is defined by the prior Row Count value; e.g. if Row Count is 30 and Row Height is set to 30; then the distance from top to bottom - in the absence of Fill Height is 900 pixels; i.e 30 x 30. If the pixel height is greater than the browser height, a scroll bar will appear and some components may be positioned off-screen.

Using Layout Panel

  1. Add a Flex Panel, Accordion or Tab Control component

  2. Left-click-and-drag in a Layout panel

    Screenshot

  3. Add a component to the Layout panel; this will fill the area of the Layout panel, but can be resized to add additional components.

    Screenshot

Check both

Unless you have a reason to lock the size of components dropped into a Layout panel, check both Fill Height and Advanced Layout. This ensures the components in your Layout panel autosize along with the Accordion or Tab Control section that contains it.

Using Advanced Layout CSS

CSS can be used to position components and use fixed-sizing to prevent component resizing on changes in browser width. Use .advanced-item[data-widgetid="xxxx-xxxx-xxxx-xxxx"] {} to configure Advanced Layout CSS

Screenshot

Style, Margins, Format

Style for common settings