#Combining layout

1 messages · Page 1 of 1 (latest)

loud narwhal
#

Is it possible to combine a column layout setup with a full-widh card?
On my dashboard id like 3 cards on top row and below a full widh card.
eg. 3 gauge cards and then the 24h history below.

ornate abyss
#

Need to think of screen size, create Section style dashboard and number of columns that full width of screen.
2 sections

1st section insert Grid (set to 3 columns) or Horizontal Stack card
Add the gauge cards into the card

2nd section set as full width- add the history card,set width

loud narwhal
#

Thanks! So how next max the total widh to screen size. Its now centered and only using like 50% of the screen.

ornate abyss
#

When creating Dashboard - option to specify “Max number of columns”, if screen not full add additional column to this (tablet in landscape I set to 3, for computer screen = 4)

Each section, in edit mode under the pencil / Settings is width, set this to same as specified under dashboard.

loud narwhal
#

Sorry, not working. Still only center.

ornate abyss
#

To edit the View - Pencil for edit mode, again for the View and you should see "Max number of columns"

To edit the cards - for the section select edit (pencil) and adjust width to be same number of columns as the View

#

Hopefully above makes sense and enable you to adjust the number of columns to achieve full screen

copper moat
# loud narwhal Thanks! So how next max the total widh to screen size. Its now centered and only...

I think this is what you're looking for:

Is there a way to make a 3 column section dashboard to fill in width without the use of layout-card ?
EDIT: Solved by adding the below in my theme's yaml
ha-view-sections-column-max-width: 800px
Another post mentioned:
ha-view-sections-column-gap: 0px
ha-view-sections-column-min-width: 320px
ha-view-sections-column-max-width: 320px
As a test, I used min/max of 200px in my theme. I reloaded All YAML Configurations via Dev Tools and then refreshed the dashboard. This is the result. You'll just need to adjust your numbers accordingly. (I'm pretty sure there is some padding involved so your column width may not be simply screen resolution divided by 3 but something a little less.)