Columns with different heights at display

Columns with different heights at display

  

Hi all,

I'm new to Outsystems and am trying to work on this static website as practice to familiarize myself with the basic widgets and layouts functionalities. 

I have found that when I try to use the 2-columns widget: within it I have an image on the left and a bunch of text on a colour background on the right, though it looks perfectly fine from the Service studio, the heights of the left image and right pane are different.  

I have played around in the configurations on the width and heights, also the breakpoints on mobile and tablets. However, it seems on the simplest webpage display, the heights are still different.

Can any one help please?

Hi Connie,

Columns are horizontally even-spaced and -sized screen areas, but they need not by definition have the same height. The height depends on the content, unless you set an explicit height with CSS.

Thank you so much, Kilian. I have tried several ways but still no success. 

Can you please direct me the relevant CSS code for this? 

Connie wrote:

Thank you so much, Kilian. I have tried several ways but still no success. 

Can you please direct me the relevant CSS code for this? 

Hi Connie,

Can you show a print of the page so that i can understand your problem?

Best Regards 

Rodrigo Henriques


Dear Rodrigo,

I'm using SilkUI Lisbon template, and I'm trying to customize this columns2 widget to have the same height. As you can see from my screen captures, the left and right panes are with same width but not height. I have played around with containers and configurations, still no luck.  Please advise. Thank you in advance.

Solution

Connie wrote:

Dear Rodrigo,

I'm using SilkUI Lisbon template, and I'm trying to customize this columns2 widget to have the same height. As you can see from my screen captures, the left and right panes are with same width but not height. I have played around with containers and configurations, still no luck.  Please advise. Thank you in advance.

Hi Connie,

In order to have both Columns with the same height you must define a fixed height for the containers. 


It is not dynamic but since your image (column1) has a bigger height than the content in column2 it will always have this behavior.

You must force the same size for both contents.

Here are some links to pages that can help you achieve this:

- https://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights
- https://stackoverflow.com/questions/39246427/css-multiple-different-height-float-left-elements-arranged-in-2-columns

My suggestion is that you create a new CSS class and apply it to both containers ( Column1 and Column2).

For example:

.ClassName{
            height:150px;
}


Ten 150px are just example. The value must be the same as the Column with the lowest height, in your case Column2. For example if Column1 has 300px height and Collumn2 has 250px then you must set your class with 250px in order to get both with the same size.

Hope this helps.

Best Regards

Rodrigo Henriques


Solution

Problem solved!!! Thank you so much, Rodrigo!