Lovelace scheme question

Configuration Frontend
1

Hello,

I’m building a mobile dashboard and i’m trying to achieve the following conditions:

3 cards vertically displayed

1 - top card
2 - mid card
3 - bottom card

I want to define all 3 cards max vertical size:

top card: 10%
mid card: 70%
bottom card: 20%

top and bottom cards have static info/size (buttons)

middle card is a conditional card and some of the conditional cards don’t fill all the avaliable space, others exceed the vertical size (in this case, 70% of the screen).

a) Is possible to define vertical size/ratio for each card? Been searching and only saw layout-card examples for horizontal scheme.

b) beeing possible, when the conditional card exceeds the ‘avaliable space’, will the card be cutted or will be possible to scroll the card inside it’s own ‘box’?

Thanks in advance

2

No. You can do it - sort of - if you put cards in a grid and render them as squares, so the height is the same as the width. The size of the cards will depend on the number of columns in the grid - you can have a grid one column wide if you want.

The card will be cut.

3

Solved.

Heres the workaround;

Vertical (layout-card) with the following code

grid-template-rows: 10% 80% 10%
grid-template-areas: |
  "header"
  "main"
  "footer"

Middle card with 80% of screen with scrollbar when needed

type: custom:mod-card
card:

CARDS, CARDS and more CARDS

view_layout:
  grid-area: main
card_mod:
  style: |
    ha-card {
      overflow-y: scroll !important;
      height: 600px;
    }

Used height to adapt to my phone.