frontend
frontend copied to clipboard
Grid card not compatible with sections
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).
(These are way too big)
Describe the behavior you expected
(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:
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
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:
-- obsolete with recent layout-features added to the sections layout
I'm afraid I don't follow you
@ChristophCaina ? How do you make a 1:2:1 stack?
@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.
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"
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.
It might be stale but it was never solved
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.
Sections now is the default layout... making the card compatible with it would be really nice.
(And, dare I say, expected?)