FlexPanel

The FlexPanel is a container controller that arranges child views using CSS Flexbox layout. It renders all child views server-side (inline) rather than via parallel HTMX requests, avoiding thread-safety issues in the macro expansion engine.

Each child view is wrapped in a styled flex item with an optional title bar (from the view's DisplayLabel) and an optional footer (from YAML configuration).

Configuration

Controller: FlexPanel
  Direction: Row
  Wrap: True
  Gap: 12
  MaxColumns: 4
  JustifyContent: flex-start
  AlignItems: stretch
  Items:
    View: MyFirstView
      Flex: 1
      MinWidth: 200
      Footer: Some description text
    View: MySecondView
      Flex: 2
      MinWidth: 400

Container properties

Property	Default	Description
Direction	Row	Flex direction: Row, Column, RowReverse, ColumnReverse
Wrap	True	Enable flex wrapping to multiple rows/columns
Gap	0	Space between flex items in pixels
MaxColumns	0	Maximum items per row. 0 = no limit (items size according to their Flex value). When set, each item's flex-basis is calculated as (100% - gap_space) / MaxColumns
JustifyContent	flex-start	CSS justify-content value for the container
AlignItems	stretch	CSS align-items value for the container

Item properties

Items are defined under the Items node. Each item references a View by name.

Property	Default	Description
View	(required)	Name of the view to render in this flex item
Flex	1	Flex grow factor. A value of 2 makes the item take twice the space of a 1 item
MinWidth	—	Minimum width in pixels
MaxWidth	—	Maximum width in pixels
Height	—	Fixed height in pixels
Footer	—	Text displayed in a footer bar below the item content

The title bar is automatically generated from the child view's DisplayLabel property. It is displayed at the top of each flex item with a styled background.

MaxColumns layout

When MaxColumns is set, the flex-basis is calculated to ensure at most N items per row:

flex: <Flex> 1 calc((100% - <gap_space>) / <MaxColumns>)

For example, with MaxColumns: 4 and Gap: 12:

• Each item gets a basis of calc((100% - 36px) / 4) ≈ 25% minus gaps
• Items wrap to the next row when more than 4 are present
• Individual items can still be wider if their Flex value or MinWidth forces it

Child view rendering

FlexPanel renders child views inline on the server side. This means:

• All child views are rendered in a single HTTP response
• No parallel HTMX requests are generated for individual items
• Panel chrome (header, close button) is automatically suppressed on child views
• Any controller type can be used as a child: TemplateDataPanel, ChartPanel, List, Form, etc.
• If a child view fails to render, an error message is displayed in its flex item instead of breaking the entire layout

CSS classes

Class	Element
.kx-flex-container	The outer flexbox container
.kx-flex-item	Each child item wrapper
.kx-flex-item-title	Title bar (from DisplayLabel)
.kx-flex-item-footer	Footer bar (from Footer YAML property)

See also

• Dashboard — FlexPanel with auto-refresh capability
• TemplateDataPanel — Commonly used as child view for KPI cards
• ChartPanel — Chart views used as child items in dashboards