Hi guys using the latest version of OutSystems and creating a reactive application. Just noticed that in traditional web the carousel autocalculates the height if there are different image sizes so the navigation will usually hug near the carousel as seen in the image.

But for reactive web since it is based on mobile pattern there is no option to autoheight when images have different sizes so it results in white space when for example the first image has big height while the next one has smaller height.

Should I try to calculate the height of the images using javascript or can this be done simply with a CSS fix? The reactive carousel also has height: auto but I doubt it would work since the parent height stays the same even when items are changed.

Can you share a small OML that reproduces the issue? That might help with troubleshooting.

As a rule, I would tend towards trying CSS first, before JavaScript. But depends on the use case.

Are these images being added dynamically, or are they static?

Hi Clintjie,

Usually if we add images with different height in carousel the image with smaller height remains in the bottom part of the carousel (near dots), leaving blank space on the upper side. But in your case it is reverse. images remains on top leaving gap betwwen dots and the image.

Looks like theme css is making its behaviour different in both cases. So please check if your theme css is makting the difference.