Skip to content

Layout

Layout Constraints Configuration

Taipy Designer uses a flat layout system where all widgets are rectangles with pixel-defined coordinates.

The responsive layout configuration, available in edit mode, allows you to choose whether to constrain the dashboard editing process or not. By default, the layout is unconstrained.

Responsive layout

  • If Row is set to none, the dashboard remains unconstrained.
  • If Row is assigned a numeric value (1, 2...), the dashboard in edit mode is organized according to this constrained layout. In the target dashboard, each row will be projected to fit the full page.

Layout Features

Foreground and Background (Z-Order)

Taipy Designer provides PowerPoint-like features for managing the layout of widgets. For example, by using the Form widget, you can create a visual group of widgets, as shown in this example:

z-order

In this instance, the Form widget was sent to the background using its context menu:

z-order

Additionally, the Form, Label, Numeric Input, and KPI Display widgets were used and customized using their graphical properties for:

  • Aligning the label text to the right
  • Changing the background color of the label
  • Adding a unit to the KPI display
  • Modifying the label text

z-order

Group Alignment and Resize

You can select multiple widgets using Ctrl + Right Click or the lasso selection with Left Click. Selected widgets are highlighted in green, except for the reference widget, which is highlighted in red. Once selected, the group of widgets can be:

  • Left-aligned (based on the left coordinate of the reference widget)
  • Top-aligned (based on the top coordinate of the reference widget)
  • Horizontally aligned (based on the vertical center of the reference widget)
  • Vertically aligned (based on the horizontal center of the reference widget)
  • Bottom-aligned (based on the bottom coordinate of the reference widget)
  • Right-aligned (based on the right coordinate of the reference widget)
  • Resized to the same size as the reference widget
  • Resized to the same width as the reference widget
  • Resized to the same height as the reference widget
  • Distributed horizontally or vertically (to ensure even spacing)

z-order