Skip to main content
OutSystems

How to design a fluid grid layout

Question

We are struggling with the fluid grid layout. The issues are:

  • Alignment
  • Shifting of mandatory fields
  • Exception message coming in between items.

For example:

Fluid Layout.png

Answer

Looking at the screenshot you've sent us I suppose that you are not using a "Form" to input your data.

To use a Form:

  1. Drag the form widget from the left widgets;
  2. Drag your entity/structure there to help you with the inputs.

fluid layout 2.png

If you need you can customize the form, adding or removing attributes, or even do it by your self:

Fluid layout 3.png

  • Yellow: Unaligned widgets as I've seen on your screenshot (with individual variables)
  • Orange: Aligned widgets using containers (with a structure variable)
  • Green: Aligned widgets using a "Form" widget (with a structure variable)

The eSpace attached was used to take all the screenshots.

https://success.outsystems.com/@api/deki/files/1310/Forms.oml