Documentation / Widgets / Basic / Container

Container

A box that groups widgets and is not seen. It is LVGL’s plain object, which the default theme draws as a card, so a Container is dropped with that taken away: no background, no border and no padding, stored on it under Style settings where you can give any of them back. On the canvas it has a faint dashed edge while you lay out the design, so it can be found; that edge is not drawn in Preview or on the board. For a box that is seen, use a Panel. A Container dropped before 16 October 2026 keeps the card look it had.

Group: Basic · Default size: 200 × 120 · Style parts: Main, Scrollbar

A dropped Container: nothing but a faint dashed grey outline on the screen, where the box is.
A Container as it is dropped: only its dashed edge, which is the designer’s.
The Layout section of the Inspector: Layout Flex, Flex flow Row, Main place Space evenly, Cross place Center, Track place Center.
Its Layout section, set as the example below sets it.

Example: three buttons in a row

  1. Drag a Container onto the screen. Under Geometry set X 10, Y 90, Width 300 and Height 60.
  2. Open Layout and set Layout to Flex, Flex flow to Row, Main place to Space evenly, and Cross place and Track place to Center.
  3. Drop three Buttons into the container. Give them the Text Back, Home and Next, and each a Width of 80 and a Height of 40. The layout places them: their own X and Y are not used.
  4. Nothing of the container is drawn: Style settings shows the Background Opacity of 0 and the Border Width of 0 it was dropped with. Give it a background there to see the box.
Three blue buttons, Back, Home and Next, evenly spaced across the middle of the screen, inside the container's faint dashed edge and with no box behind them.
The row. The dashed edge is the designer’s: on the board the container is not drawn.
Style settings for the container's Main part: Background Opacity 0 and Border Width 0, as it was dropped.
No background and no border, as it is dropped.