Layoutoption with HA 2024.7.0bx

[ChristophCaina]

With HomeAssistant 2024.7.x a new Layout-Option for cards will be implemented. This option does allow to define, what size a card should have.

This can be implemented in UI or via YAML:

UI Option for different cards:

same card, yaml-code:

type: gauge
entity: sensor.heizkorperthermostat_kuche_level
name: Ventilstellung
layout_options:
  grid_columns: 2
  grid_rows: 2

I've used the yaml option for the mini-graph-card as well - and it is working

type: custom:mini-graph-card
entities:
  - entity: sensor.heizkorperthermostat_kuche_actual_temperature
hours_to_show: 24
points_per_hour: 4
name: Temperatur
layout_options:
  grid_columns: 2
  grid_rows: 2

But having the gauge and the mini-graph-card placed by each other, it is visible, that the graph card is slightly bigger than the gauge:

This screenshot is showing the same configuration - in the first row, both cards are placed inside a horizontal-stack card, In the row below, they are using the new layout option inside a section.

[Silther]

Saw the same thing, there should be an option for adaptive height or something like that. Because different zoom level in the browser or even the mobile app have all slightly different heights you cannot hardcode the correct height.

[TN-1]

Cards also overlap slightly. Present in both dashboard and edit views.

[Presswerk65]

I have a similar problem - In a grid, with the Option "square" enabled, the card doesn't take the hole space (black bar between graphs and buttons)

[phwoelfel]

Can confirm that the cards are a bit too long in the new layout:

It is also visible in the editor:

[HealsCodes]

Seems like the problem is related to the height-to-width ratio of the card. Playing around with different values for grid_columns the card fits almost perfect for 1 column, is slightly too high for 2 and gets increasingly too tall for 3 and 4.

Hiding the main state labels using the show option seems to fix it for column values of up to 2 but it also removes the key label you want to see for most sensors.

[EDIT: fixed the wording to make it clearer]

[HealsCodes]

Until someone has time to look into the card's code I made a small card_mod stylesheet to work around part of the problem.

NOTE: It's not a real solution as it does not work for multi-input graphs (not my use case so I didn't fix the legend positioning etc.)

Tested with row / column sized of 2x1 and upwards; 1x* works partially but it's really to small to not have content overlap. I might look into it if there's demand for it.

card_mod:
  style: |
    /* card-mod until 
     * https://github.com/kalkih/mini-graph-card/issues/1111
     * is addressed
     */
    ha-card.flex.type-custom-mini-graph-card { 
      --flex-card-fixed-height: calc((var(--row-height) + 0.5 * var(--row-gap)) * var(--row-size));
      min-height: var(--flex-card-fixed-height);
      max-height: var(--flex-card-fixed-height);
    }
    div.states, div.header.flex {
      z-index: 3;
    }
    div.states { 
      position: absolute; 
      top: min(30%, 36px);
      z-index: 2; 
    }
    div.graph {
      position: absolute;
      bottom: 0px;
      max-content: var(--flex-card-fixed-height);
    }

grid_columns: 2, grid_rows: 2

grid_columns: 3, grid_rows: 2

grid_columns: 3, grid_rows: 3

[Tamas-Toth-ebola]

Hi!

I just want to throw a vote for revamped size handling, to follow the 'grid layout' defined in HA for the card itself. I think with that new possibility there is no real requirement to define sizes from config in pixels, if it possible to automatically align to the defined row numbers.

Thanks a lot in advance, if it could be possible.

(With the current solution there are more problems, as if I align to properly on mobile screen the same result will be off on my desktop, and vica-verse...)