I want to create a view that looks like the picture above and I have struggled with layout-card, grid-card and different kind of combinations of horizontal- and vertical stacks but failed miserably. Any chance that this could be done with layout-card? I want the cards to fill the entire view
Iāve used horizontal-stack cards around the buttons to ensure they fill 100% of the row height. And this is where you might meet your first hurdle - your graphic assumes that the default button height is 50% of the picture-glance height, which is not the case. Therefore, with this layout, the buttons on rows 3 + 4 will be taller than the buttons on rows 1 + 4.
Assuming you are working with a screen with a fixed height and width e/g a tablet, you can play around with Thomas Lovenās custom card-mod to specify a height in pixels for the cards on rows 2 + 3, but this will not likely work well on a layout that needs to be responsive.
Anyway, hope this can get you going at least. Others might chip in if my code has obvious flaws or ways it could be improved.
Trying to build off of your template I have gotten stuck.
I thought I had it figured, but the height of my buttons in my second vertical stack is not automatically adjusted to fill the outer horizontal stack.
Did I do something wrong in the grid-template? To me it should be āsimplyā two vertical stacks in one horizontal stack and the buttons in the second vertical-stack should be strechted evenly to fill the second column.
Same for vertical, horizontal.
Works only if the type: line is commented. Panel mode = false.
It is not that I cannot live w/o badges - just for testingā¦
Update 08.12.21:
There is a Github issue for this:
I removed the layout-card from HACS and rebooted HA but when I create a new view I can see from the drop down menu that the mansory (layout-card), as well as the grid (layout-card) etc. are still present.
Does it mean that layout-card is still present/installed somehow?
It uses the whole width of the main area; I tried to duplicate the card and see if the width reduces to 50% but it does not work, the new card just comes on top of the original one
Iāve tried also to add this code at the end of the grid card (I tried with px values, percentage values and using :host instead of ha-card) but it does nothing
Hi @CDRX2 (or anyone else lol)
Iām trying to do a similar sidebar and have some cards set up using the !include like you have.
But Iāve found if I make changes in any of the Yaml files and save, it never updates on the dashboard thatās even on the main Lovelace Yaml file or any of the !include cards even with a force refresh
Only way Iāve found to work is change the name slightly of the Yaml file save then rename it back and it loads the changes on a refresh.
Anyone any tips as I canāt use it like that.
Thanks
Hi!
What do you mean when you say force refresh? In order to reload, going into the three dots menu at the top right and selecting refresh has always worked for me.
Refreshing the page via the browser will not, however.
What Iām trying to achieve is something like the picture below; basically a non-homogeneous card distribution; I would like to be able to have rows with one card, with two cards at 50% with two cards at 70/30%, three cards ā¦
Hi thanks for the reply.
Yeah I meant Using the F5 key to refresh the browser.
Iāve not actually tried using the refresh from there Iāll do then when I get home from work thanks.
Are you willing to share your code for the sidebar part ?
Iām trying to work out how to do the background and other bits as mine just look like buttons next to each other as it is now but really a sidebar so would be great to see some working code.
Thanks
The first 2 rows would be pretty straightforward without using any custom cards, but the third row makes it slightly more complicated as youāve found.
Given that you have row 2 split 50/50, and row 3 split across what looks like 20/35/45, Iāve effectively worked from the need to split your grid into 20 column units to cover both scenarios.
My suggested code is therefore a little unwieldy and probably not what someone who knows CSS much better than me would do, but this produces something like what your picture shows I think:
## lovelace_test.yaml
title: Test
type: custom:grid-layout
layout:
# 20 equal columns, each taking up 1/20th of the width
grid-template-columns: repeat(20, 1fr)
grid-template-rows: auto
cards:
#Row 1
- type: horizontal-stack
view_layout:
# start and end point for card across all the columns
grid-column-start: 1
grid-column-end: end
cards:
- type: xxxx
#Row 2
- type: horizontal-stack
view_layout:
# start and end point for card across first half of the available columns
grid-column-start: 1
grid-column-end: 11
cards:
- type: xxxx
- type: horizontal-stack
view_layout:
# start and end point for card across second half of the available columns
grid-column-start: 11
grid-column-end: end
cards:
- type: xxxx
#Row 3
- type: horizontal-stack
view_layout:
# 4 columns = 4fr
grid-column-start: 1
grid-column-end: 5
cards:
- type: xxxx
- type: horizontal-stack
view_layout:
# 7 columns = 7fr
grid-column-start: 5
grid-column-end: 12
cards:
- type: xxxx
- type: horizontal-stack
view_layout:
# 9 columns = 9fr
grid-column-start: 12
grid-column-end: end
cards:
- type: xxxx
[The advantage of using horizontal-stack cards like this is that you can easily sub-divide them into equally spaced cards should you wish for e.g a row of buttons].
Hope this is enough to get you started at least e.g for adding a row with a 70/30 split (which you didnāt include in your picture).
but it looks like this on my end.
