Different List row behavior between Legacy and Responsive mode when image is empty

[Yuki.O]

Body
I switched my screen from Legacy mode to Responsive mode to address a List spacing issue, but noticed a different problem.

In Legacy mode, when an image component inside a List item has no image data, the surrounding rectangle (container) automatically shrinks to fit the remaining content. This allowed compact list rows when images were missing.

However, in Responsive mode, when the image is empty, the rectangle does not shrink and keeps a large empty space where the image would be. As a result, List items become much taller even though there is no image content.

Summary of behavior:

• Legacy mode:
  If the image is empty, the rectangle/container shrinks.

• Responsive mode:
  If the image is empty, the rectangle keeps its space and does not shrink.

Expected behavior:
List rows should adapt to content consistently, or there should be a way to collapse image space when no image is present, especially in Responsive mode.

This difference makes it difficult to migrate from Legacy to Responsive layouts for feed or message-style UIs.

[Dilon]

Hi @Yuki.O,

Does the image is inside the background container/rectangle? See the docs in here : Grouping Components | Adalo Resources

Thank you and have a great day!

[Victor]

Hi @Yuki.O,

Just in case: “Layout” section covers horizontal layouts, i.e. how the component should behave on a certain screen width (narrow in mobile, wide in desktop).

Unfortunately there is no direct way to control vertical layouts and there is no public information on how Adalo rendering engine calculates the height of an element and decides where to shrink it or not (at least to my knowledge). In my experience, you can experiment with the elements “touching” / “not touching” each other: e.g. move an image 1px lower than “message” text label, and move heart icon 1px lower than image, so the elements don’t touch each other, and see how it works.

Hope this helps.

Best,
Victor.