67
Views
16
Comments
Solved
Same height containers
Question
Application Type
Reactive

I need them to be same height, so there isn't this discrepancy between them, but the thing is that they are both blocks.

I have tried the CSS that i found here: https://www.outsystems.com/forums/discussion/66965/get-container-height/ , but it doesn't work for me.

2019-01-31 08-54-57
André Costa
Champion
Solution

I believe I understood what your problem is.

From reviewing your OML file, it looks like both divs already have the same height, but the buttons are not aligned at the bottom. Is that correct?

Would setting a fixed height within the Block be a viable solution? If so, you could place the content within the white card inside a container and set a fixed height for it.

AC




2019-01-31 08-54-57
André Costa
Champion

Hi @Cristiana Esteves 

Have you defined the containers to be full height with CSS? Do you also have any CSS within the blocks that might be overriding the container styling?

If possible, could you share your OML file? That would help the community provide a more accurate solution.

AC


2022-09-26 08-44-58
Cristiana Esteves

Have you defined the containers to be full height with CSS? 

  • How do I do that?

Do you also have any CSS within the blocks that might be overriding the container styling? 

  • The blocks don't have any CSS applied to them.
2019-01-31 08-54-57
André Costa
Champion


How do I do that? 

  • Apllying the solution you have mentioned before should work. 

The blocks don't have any CSS applied to them.

  • The issue is likely within the Block itself. Even if you haven't explicitly set any CSS, there could be some default CSS affecting its behavior. 

Are you able to share your oml?

2022-09-26 08-44-58
Cristiana Esteves

No, I can't share.


But I checked and my containers are actually with same height but the aspect of both blocks remains diferent? Because since they have diferent information the content cards size are diferent for each of them...  Is there a way I can homologate the visual aspect? 

2019-01-31 08-54-57
André Costa
Champion
Solution

I believe I understood what your problem is.

From reviewing your OML file, it looks like both divs already have the same height, but the buttons are not aligned at the bottom. Is that correct?

Would setting a fixed height within the Block be a viable solution? If so, you could place the content within the white card inside a container and set a fixed height for it.

AC




2022-09-26 08-44-58
Cristiana Esteves

Yes, but I also need to have the content cards aligned with each other, so that you can easily compare the information provide. Is there any dinamic way to do it or simply set a fixed height for the content cards and that's it?

2019-01-31 08-54-57
André Costa
Champion

Yes, setting a fixed height for each section should resolve the issue.

It’s possible to use more complex CSS to calculate the height dynamically across different blocks, but I believe setting a fixed height will suffice for your use case.

AC

2022-09-26 08-44-58
Cristiana Esteves

Could you provide an explanation or an oml for the CSS dynamic way?

Only if it doesn't take much of your time. I'm not very familiar with CSS yet, but I'm curious about how to do it.

2019-01-31 08-54-57
André Costa
Champion

Sorry, Cristiana, my modest CSS knowledge doesn’t yet allow me to develop something with that level of complexity. I'm not even sure if that's possible.

Did the fixed height solution solve your issue? 

2024-07-12 05-57-50
Gourav Shrivastava
Champion

Hello @Cristiana Esteves 

You can use the "Columns2" web block provided by OutystemsUI, add both div inside it, and make your block at full height it will solve your problem. 




Thanks 

Regards Gourav Shrivastava

2019-01-31 08-54-57
André Costa
Champion

Columns2 will split content in 2 columns with responsive capabilities but have no impact on the height of the content.

2020-07-21 19-28-50
Rajat Agrawal
Champion

Hi @Cristiana Esteves,

I am replicating same thing see we use this and it is working fine.

Inside the web block any widget you are using can you please inspect and show us what is overridding or share OML so we will check on that.

I have attached OML also with use of web block you can refer that also:


Regards,

Rajat

SameHeight.oml
2022-09-26 08-44-58
Cristiana Esteves

Yeah, so my containers are actually with same height but how can I can remove the discrepancy between the aspect of both blocks? Because since they have diferent information the content cards size are diferent for each of them...

2020-07-21 19-28-50
Rajat Agrawal
Champion

Ok, If possible can you share one demo app OML for that so we will check what you used inside webblock after doing inspect.



Regards,

Rajat

2022-09-26 08-44-58
Cristiana Esteves
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.