Lovelace: layout-card causing strange sizing issues

daphatty · May 26, 2019, 5:23pm

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 and height to the entity card with card-modder. (This kind of worked as it somewhat reduced the overall height of the card when I applied width: 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

daphatty · May 26, 2019, 6:42pm

Ok, this is even more frustrating. When using absolute values like these:

column_num: 4
max_width: [16px, 1620px, 1080px, 16px]

The end result is evenly spaced columns?!

thomasloven · May 26, 2019, 7:48pm

entity-button adds margins to the top and bottom of the card relative to the card width, so that it always has approximately the same aspect ratio rather than the same height. As such, a wider card will always also be taller.

daphatty · May 26, 2019, 8:04pm

Is it safe to assume this is the case with any card I use in this fashion? I originally tried using custom:button-card for the header but figured I’d “go back to stock” to eliminate any potential compatibility issues.

FWIW, I’m attempting to replicate what @hwoltering accomplished using layout card as shown in this post.

thomasloven · May 26, 2019, 8:16pm

Not at all. entities, glance and markdown (mostly) are definitely off a fixed height.

That example is using the custom button-card as you mentioned. I can’t say why the built-in one was designed the way it is, but it won’t work for you in this way.

I’d suggest using an entities card with an empty entities list:

type: entities
entities: []
title: Label 1
show_header_toggle: false

daphatty · May 26, 2019, 8:42pm

As always, thank you for the suggestion. This actually works well as a header card.

On a related note, is there a way for the non-expert level user to determine how the various card types will behave within layout-card? Is there a distinct attribute that we should seek? Or is it just trial and error?

thomasloven · May 27, 2019, 10:05am

Well… I had no idea there was a problem until you told me…

daphatty · May 28, 2019, 7:47pm

My apologies. I wrongly assumed that the behavior I’ve experienced with Layout card in conjunction with different stock and custom buttons was actually intended behavior. I’m not well versed enough in Lovelace card creation to really discern what is working as intended beyond the information provided in the github readme files. I’ll open a feature request and try to clearly articulate what I would like layout card to do in the above scenario.

thomasloven · May 28, 2019, 7:52pm

What I meant to say is that I didn’t expect this behavior before you told me, and I believe myself to certainly fall within the “expert” lovelace users. To know which cards would behave what way you’d need to know not only exactly what to look for, but also know that you’d need to look for it at all.

So, no, there’s no way for the non-expert level user to know how things will behave, besides trial and error. After all… that’s the preferred method of us frontend developers as well… mostly.

Please open an issue. Any ideas on how to handle corner cases always help.

j4Media · June 5, 2019, 7:36pm

I’m having a similar issue to the starter of this thread…

I’m loving the flexibility that the layout-card provides and it’s really going to make a difference in developing advanced lovelace layouts. In my test, I am using horizontal and vertical stacks along with picture-element cards to create the most flexibility. The problem I’m having is that elements/cards in each layout card “row” do not fully fit the height of each row when one element pushes beyond the height of the other. See my screen grab below. In row 2, the issue is identical to the one @daphatty experienced and I guess it has to do with the margins being added by the entity card, but in row 3 I’m using the picture-elements card in the first column and I’m thinking there has to be a way to have that card fill the height completely…do you think that’s possible @thomasloven?

thomasloven · June 6, 2019, 8:32pm

You could try using card-modder and set height to something that works.