How to make one column the dominant height for other columns in the row

Webdesign Help
1

Anyone know of a way to stop a column from exceeding the height of another column in a row?

Example:

The left-col content has a greater height then the right-col content, but I want the right column to be the dominant height. I want left-col height to match right-col and if the content in right-col grows in height, I want left-col height to resize to match the right-col height but never exceed it.

I have a bit of a solution with this bit of javascript:

var rightHeight = document.getElementById(‘right-col’).clientHeight;
document.getElementById(‘left-col’).style.height = rightHeight + ‘px’;

and then css:

#left-col {
height: fit-content;
}

#right-col {
height: fit-content;
}

But it doesn’t recognise if there is a change of height after the loading of the page, say if you are on a tablet device and change from landscape to portfolio without refreshing the page, it won’t update.

Can this be achieved with just css? Bare in mind that I don’t want to be setting a fixed height on the parent Row.

Or if someone with the JS knowledge could advise on how to get the bit of js to work not just on page load.

I wonder if the Bootstrap Studio developers would be able create a solution for this, maybe a switch control to set the selected column as the max height for all columns within its parent row, and have that work with the SM MD LG XL XXL.

2

You can try wrapping your js in a function, then running it on load and on resize:


function setLeftColHeight() {
  var rightHeight = document.getElementById('right-col').clientHeight;
  document.getElementById('left-col').style.height = rightHeight + 'px';
}

// Run on page load
window.addEventListener('load', setLeftColHeight);

// Run on window resize
window.addEventListener('resize', setLeftColHeight);
1 Like
3

Thanks Richards. That’s worked :+1:

4

You should be able to do this with using Flexbox.
If this is a Row with 2 Cols in it, you can set the Row to Flexbox and then set the Cols to Flex with the value 1 which should do it.

Edit: Technically, setting the Row to Flex which is basically the default, the Cols also default to Flex and they automatically default to same height.

I’d suggest as a test to make a new blank design, drag in a container > row > col and a second col.
The spans in each col, add a lot of text to one then select each col and assign a BG color so that you can see how the default behavior is and then go back to your design and work it out.
It’s what I would do so that I’m not making a bunch of unnecessary changes and mess up my design.

Saj