TLDR - With 40/60 split, how do I make the header cards the same height and extend across the entire column?
I have been playing around with a layout based on lovelace-layout-card and some basic horizontal-stacks, and am encountering some strange behavior with card sizing. Using layout-card to split the screen 40/60 (see the screenshot below), and an entity card used as a header, the width of the resulting headers do not match.
I have attempted to set a specific height for the header card to no avail. No matter what I do, the header in the 60% column is always taller than the header card in the 40% column.
Maybe someone (perhaps @thomasloven) can shed some light on why this is happening because I am at a total loss. I just want to be able to create columns of various widths and stretch a card across the length of the column without losing the ability to modify the size of said card. Below is the config I’m using for reference.
A few things I’ve tested that did not work:
- Stacking the header card within a horizontal-stack
- Encompasing each column within a vertical-stack-in-card
- Applying
width
andheight
to the entity card with card-modder. (This kind of worked as it somewhat reduced the overall height of the card when I appliedwidth: 100%
along with a height value. The height value was ignored. - Used custom:button-card instead of entity-card for the header and applied the necessary sizes.
- title: Homekit
id: Homekit
icon: mdi:apple
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:button-card
template: horizontal-divider-black
- type: custom:layout-card
layout: vertical
column_num: 2
max_width: [40%, 60%]
cards:
- type: entity-button # Header Card - 40% column
entity: light.office
name: test-label-1
show_icon: false
show_label: false
show_name: true
- type: horizontal-stack
cards:
- type: custom:button-card
template: homekit-button-settings
#name: Apple Test
label: test-label-1
entity: light.office
- type: custom:button-card
template: homekit-button-settings
#name: Apple Test
label: test-label-1
entity: light.office
- break
- type: entity-button . # Header Card - 60% column
entity: light.office
name: test-label-2
show_icon: false
show_label: false
show_name: true
- type: horizontal-stack
cards:
- type: custom:button-card
template: homekit-button-settings
label: test-label-2
entity: light.office
- type: custom:button-card
template: homekit-button-settings
label: test-label-2
entity: light.office
- type: custom:button-card
template: homekit-button-settings
#name: Apple Test
entity: light.office