frontend icon indicating copy to clipboard operation
frontend copied to clipboard

Grid card not compatible with sections

Open Nickduino opened this issue 1 year ago • 4 comments

Checklist

  • [X] I have updated to the latest available Home Assistant version.
  • [ ] I have cleared the cache of my browser.
  • [ ] I have tried a different browser to see if it is related to my browser.
  • [ ] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

The grid card doesn't accept the layout_options: argument (see my yaml below: all gauges should be 1x1).

image (These are way too big)

Describe the behavior you expected

image (This is my expected output: it's a screenshot of 1x1 gauges that aren't in a grid)

If I try forcing the whole grid card to be 3x2, I get an output that is still not the right size and doesn't fit in a 3x2:

image

Steps to reproduce the issue

Using this code, I would expect the grid to be constituted of 1x1 gauges but they're much bigger.

square: false
type: grid
cards:
  - type: gauge
    entity: sensor.ozone_clermont_ferrand
    name: O₃
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.dioxyde_d_azote_clermont_ferrand
    name: NO₂
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.dioxyde_de_soufre_clermont_ferrand
    name: SO₂
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.pm10_clermont_ferrand
    name: PM10
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.pm25_clermont_ferrand
    name: PM25
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1

What version of Home Assistant Core has the issue?

2024.10.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome Version 129.0.6668.60

Which operating system are you using to run this browser?

Windows 10

State of relevant entities

Supervisor 2024.10.0
Operating System 13.1
Frontend 20241002.2

Nickduino avatar Oct 09 '24 16:10 Nickduino

Some will say the whole point of Section is to avoid fixing things in a grid. But there are elements you don't want to flow in an inorganized manner.

Connected issue: the grid card doesn't allow you to mix cards of different grid size. Here is what I would truly want to achieve:

image

Nickduino avatar Oct 09 '24 16:10 Nickduino

-- obsolete with recent layout-features added to the sections layout

ChristophCaina avatar Oct 10 '24 11:10 ChristophCaina

I'm afraid I don't follow you

Nickduino avatar Oct 10 '24 12:10 Nickduino

@ChristophCaina ? How do you make a 1:2:1 stack?

Nickduino avatar Oct 20 '24 16:10 Nickduino

@ChristophCaina ? How do you make a 1:2:1 stack?

the 1:2:1 stack is directly done within the section. The Section is supporting a 4 "colums" layout - so you can use any combination of the width that end up with 4 columns in total. But - the one column size is only available for the Tile Card, if you use vertical layout for it.

ChristophCaina avatar Oct 30 '24 09:10 ChristophCaina

It's not a stack, then, it's just three cards side by side. Drop another card in front and they will flow in a completely different layout (which is why I want to "fix" them in a grid in the first place"

Nickduino avatar Nov 01 '24 16:11 Nickduino

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Mar 13 '25 00:03 github-actions[bot]

It might be stale but it was never solved

Nickduino avatar Mar 13 '25 10:03 Nickduino

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Jul 03 '25 11:07 github-actions[bot]

Sections now is the default layout... making the card compatible with it would be really nice.

(And, dare I say, expected?)

Nickduino avatar Jul 10 '25 13:07 Nickduino