How to set fixed height for a column?

Configuration Frontend
1

What I’d like to do is to have a column with a fixed height. The column has 3 cards -
card1
card2
card3
The 3 cards are in a vertical-stack to make sure they stay like that.
The 3 cards have dynamic content, so I don’t know their maximum size in advance. I want the height of card 3 to be the amount of space that’s left in the column (with a fixed maximum height for this column, for example 600px maximum height). So ideally I’d like for card3 height to be (600px - height of card1 - height of card2)

How would one achieve that?

2

You need Layout Card and then set your dashboard up with a grid.

1 Like
3

@WallyR - this almost achieves the goal…
I used a vertical (layout-card) view type. In the parameters for it I wrote:
height: 563px
width: 400

And then my 3 cards are set up inside. What happens is that the bottom card is “cut” in the middle and the entire view now has a scrollbar on the side. What I’d like to achieve is for the 3rd card to just have less height to fit the constraint of the layout-card height. Or, if all else fails, to just hide the scrollbar and prevent scrolling…

4

The scrollbar is actually the browsers own that comes up if the page extend our over imthe screens boundaries, so that means your cards are too big.

Remember that you can use the layout on the single cards too.

5

I simulated this, for simplicity, with 3 markdown cards.
This is a layout-card vertical view, and 3 simple markdown cards. See the scrollbar on the side which isn’t top to bottom like the browsers, it’s the height of the view.

Capture
Capture1701×890 44 KB

6

It is still the browser.
It is because you have set a limit on the viewable size of the top element and then put under elements into it that fill more than the size you set.

7

And so, the question remains… What I wanted to achieve is simply to have the bottom card to resize its height so it’ll fit the allocated height of the component it is in. A dynamic height like that will prevent issues from the browser…

8

That cannot be forced from the outside, it means that the styling of the card that needs to shrink should change.

9

Right. So the 3rd card needs to have something that changes its height. Something in the CSS of the 3rd card, maybe using card_mod.
Something like was discussed here perhaps, and adapted to HA.

10

Grid layout might also be an option.
There you can define the sizes of the cards.