Skip to content

Layout Panel

Screenshot

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

Basics

Screenshot

Name
A name for the component provided by the user.
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. Removed (and hidden) components can be returned (or included) by clicking on the Component Layout button and selecting them from the list. Components are identified by their title, user-defined name or component type, and in that order of preference. Clicking on 'Reset Layout' will restore the layout of the components to their original state.

    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.
Enable WebGL Context
When enabled, every ChartGL widget that is directly added to the Layout Panel will share a single WebGL context.
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

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