576
Views
10
Comments
Solved
dynamic container height and layout
Application Type
Reactive

Hi All,

I need this type of Layout.

1.container height should be Dynamic 

2.Ui look like Screenshot( only container or card arrange)

is It Possible in Outsystem??

and below is my oml file so please check this


dymanic container.oap
2025-06-28 01-52-12
Marco Mateo
Solution

Here you go :) 

Basically, I added styles that will be implemented to the main lists wrapper

ReactiveExperiments.oml
2025-06-28 01-52-12
Marco Mateo

Hi MD Mansur,

Container automatically adjust based on the contents.

Below is the sample that you want to achieve. also attached the oml for reference.

Basically, I customized the card class and applied in the container.

.custom-card { 

   background-color:var(--color-neutral-0); 

  border:var(--border-size-s) solid var(--color-neutral-4);  

   border-radius:20px;  padding:var(--space-m);  

   word-wrap: break-word;  

   margin-top: var(--space-base);

}

Test screen here: https://marcoomateoo.outsystemscloud.com/ReactiveExperiments/DynamicHeight?_ts=638026740932918772

Hope this helps.

Cheers

ReactiveExperiments.oml
UserImage.jpg
Md Mansur

Hi @Marco Mateo 

I have only one Input textArea and add button and when I insert data in data base.

1. Container height should be fit for cotainer

2.Ui is auto adjustable like this:

and Your Oml Result Like that:

I want to remove Extra Space Bw Card and Height of Container should be Dynamic

Thanks

ReactiveExperiments.oml
2025-06-28 01-52-12
Marco Mateo

Hi MD Mansur,


Do you mean that it should automatically aligned with the highest height within the row?

Something like this:

if this is what you want to achieve, I attached the updated oml.

I added js that will run during on ready and will automatically adjust the height of each card base on the heighest column within the row.

Just make sure to assign the correct input parameters in the JS

You can use this test screen

Best regards,

Marco Mateo

ReactiveExperiments.oml
UserImage.jpg
Md Mansur

Container height should be according to content if( one container has less data than height is small and if one container has more data than height is bigger and I want container automatically aligned with the within the row 

like this all conatiner has a Image and container automatically aligned with the within the row  :


2025-06-28 01-52-12
Marco Mateo
UserImage.jpg
Md Mansur

yes but 2nd container size should be according to content becouse it has lots of space

can you please share oml 

2025-06-28 01-52-12
Marco Mateo

That's too dynamic. It will require a lot of conditions.

What are your criteria to consider one container should be "small" in terms of content? 

for example,

-  if the container has 50 chars, it should be based on content.

- if the image inside the container is 20px in height, it should base on content.

There are a lot of scenarios to cover if you want to achieve it that way.

If we are going to check the extra space height, it will be too complex compared to just checking the size of content. it should have basis if we are going to decide whether a particular container should follow the content. I hope that make sense


UserImage.jpg
Md Mansur
2025-06-28 01-52-12
Marco Mateo
Solution

Here you go :) 

Basically, I added styles that will be implemented to the main lists wrapper

ReactiveExperiments.oml
UserImage.jpg
Rahul Sharma

Hello friends thank you I get what I want in this discussion yayy! thanks OutSystem.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.