Try a hard refresh in the browser.
If you open dev tools and look in the ha-card element, you’ll see a div with the id progress; inside that, a pseudo-element ::before will be updated with the width.
is this the correct spacing ? i dont have the ::before
Edit something is wrong here i found the progress but its not where it must be
1 Like
1 Like
wow thank you that did the trick, its animated too, thats really nice, really thank you
by the way i opened the dev tools of the browser the first time, i see many errors but i cant read them because the color, have you a idea? i never worked with the browser tools
The way it works in chrome is that anything that is updated will flash, but in your browser, it looks like it’s just styled as a solid color.
Anyways, those aren’t errors, any errors will show up in console.
A you can see, mine shows as clear, but the reason that so many elements are updated is the way that the CSS variable is injected, specifically this line:
document.documentElement.style.setProperty('--progress-width', percentage.toFixed(1) + '%');
The trouble here is that javascript can’t be used to style pseudo elements like :before or :after. So the variable is injected into the document root, and then that variable can be defined as it is in #progress::before width.
As an alternative, I could inject 2 elements instead of 1, (#progress and #bar for instance) and with absolute positioning have bar display over the top of progress, but that seemed kind of messy. I didn’t really notice a performance hit doing it the way that I am though.
edit: I noticed an issue when 2 players are active, the progress bar will fail for whichever one wasn’t active on the browser refresh, so I’m going to edit my original post with the alternate 2 element version.
anone has a clue how this can be solved?
this might help
use triggers_update
1 Like
Hello all,
I just integrated this modification from Matias (swiper media title · matt8707/hass-config@d8f8f97 · GitHub) but it looks like it is not working on my system since I get an error:
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading ‘on’) in ‘let horizontalStack = this.getRootNode().host,
swipeCard = horizontalStack.getRootNode().ho…’
Any idea why this is happening? What should I check?
Thanks as always for your support
Dave
Thank you! Did the trick indeed to use sensor.time to get the card updated every minute
1 Like
Anyone know what might have happened. I didn’t change anything in the files. I restarted HA and I have no sidebar. I get an error
I don’t use that popup so I don’t know and I didn’t test this
it works… thank you 
1 Like
it looks like changing the code in that way fixed my problem:
let swipeCard = this.getRootNode().host,
gridTitle = swipeCard.getRootNode().querySelector("h1");
really I can not understand why, everything is aligned with @Mattias_Persson dashboard.
Anyone has any idea?
thanks again
Dave
Hi All. Newbie to HA and having some issues with card layouts/grids. Can anyone help me out? I can’t seem to get it to work. Looks fine in ‘vertical view’ but as soon as I change the layout to grid everything messes up. Here is my code:
views:
- title: Home
type: custom:grid-layout
layout_type: grid
path: 0
layout:
display: grid
grid-template-columns: auto 150px 150px 150px 150px 300px auto
grid-template-rows: 80px 210px 50px 35px 40px 40px 40px 20px
grid-gap: 25px
grid-template-areas: >
". clock clock titlemusic weather weather ."
". homecard lightcard personcard1 personcard2 music ."
". house lights temperature secure network ."
". titledownstairs titledownstairs titleupstairs titleupstairs calendar ."
". livingroom snug hugoroom masterroom ."
". diningroom hallway bathroom ensuiteroom ."
". spareroom dressingroom garden garage ."
". footer footer footer footer ."
mediaquery:
"(max-width: 1100px)":
grid-template-columns: auto 150px 150px 150px 150px auto
grid-template-rows: 80px 210px 50px 35px 40px 40px 40px 250px 20px
grid-gap: 30px
grid-template-areas: |
". clock clock weather weather ."
". homecard lightcard personcard1 personcard2 ."
". house lights temperature secure network ."
". titledownstairs titledownstairs titleupstairs titleupstairs ."
". livingroom snug hugoroom masterroom ."
". diningroom hallway bathroom ensuiteroom ."
". spareroom dressingroom garden garage ."
". music music calendar calendar ."
welcome @CharlieP1988,
line 4 layout_type: grid and line 7 display: grid of your code are not needed, and should be removed
example from @Mattias_Persson
views:
- type: custom:grid-layout
title: Home
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar vardagsrum studio sovrum ."
"sidebar media övrigt hemma ."
"sidebar footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". vardagsrum sovrum ."
". studio övrigt ."
". media hemma ."
". footer footer ."
". . . ."
example from me
views:
- type: custom:grid-layout
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: 0.7fr repeat(3, 1fr) 0.7fr
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar Living_Room Rooms Climate footer"
"sidebar media Home People footer"
"sidebar . . . ."
mediaquery:
#phone
'(max-width: 800px)':
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". Living_Room Climate ."
". Rooms Home ."
". media People ."
". footer footer ."
". . . ."
useful links
see this link for more info on layout card: GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.
see this link for help with grid: CSS Grid Layout
2 Likes
Hi @Mattias_Persson and HA fans,
I’m trying to understand this CSS styling with card-mod.
There has been shared multiple different examples and guides, and I’ve managed to successfully use styling with simpler, shorter paths, but this one stumps me:
I’m trying to access this rule in order to remove the border and background from ‘.marker’.
The JS path is:
document.querySelector("body > browser-mod-popup").shadowRoot.querySelector("ha-dialog > div.content > hui-vertical-stack-card").shadowRoot.querySelector("#root > hui-map-card").shadowRoot.querySelector("#root > ha-map").shadowRoot.querySelector("#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > div > ha-entity-marker").shadowRoot.querySelector("div")
There is already styling on this card, and ‘ha-entity-marker$’ is one of my many failed attempts.
card_mod:
style:
.: |
#root {
height: 25em;
padding-bottom: 0 !important;
}
ha-icon-button {
color: var(--primary-color);
zoom: 140%;
margin-left: -0.2em;
}
ha-card {
border-top: 2px solid #1a1a1a;
border-radius: 0;
transition: none;
margin-bottom: -4px !important;
height: 25em !important;
}
ha-map$: |
#map {
background-color: #191919 !important;
}
.leaflet-control-attribution {
display: none;
}
.leaflet-bar a {
background-color: rgba(115, 123, 124, 0.2) !important;
color: #9da0a2 !important;
backdrop-filter: blur(0.25em);
zoom: 140%;
}
a.leaflet-control-zoom-in {
border-bottom: 1px solid #181818 !important;
}
.leaflet-pane.leaflet-tile-pane {
filter: invert(0.95) grayscale(0.95) contrast(95%);
}
ha-entity-marker$: |
.marker {
border: none !important;
background-color: #1c1c1c00 !important;
}
Please keep in mind that I’ve tried using the card-mod-helper, but I guess I’m not understanding the rules of CSS and/or card-mod.
Hi everyone,
thanks to @Mattias_Persson for creating and sharing this. I am trying to adapt it, but I a stumbling over a few basic problems. They may have been addressed here already, but itś not easy to find anything here 
Since the german language is famous for its long words I have the problem that most of my entity names do not fit in the cards:
I set show_state: false to make some more room. Then I tried to change the grid-template-areas:
- grid-template-areas: |
"icon circle"
"n n"
"n n"
But that doesn’t really change much. Can anyone tell me how to span the name over two rows?
10 mins of googling later and I found it Lovelace: Button card - #1719 by RomRider give the post some love if it helps.
for next time this is how I found it “button card home assistant word wrap” in google
first undo all the changes that you have made up to this point that don’t work eg the change to the grid-template-areas.
next in button_card_templates/base.yaml look for
name:
- justify-self: start
- line-height: 121%
replace the above with
name:
- justify-self: start
- line-height: 119%
- text-overflow: unset
- white-space: unset
- word-break: break-word
feel free to change the line-height to a value that is better for your font size, I think mine is little smaller than the default
1 Like
That worked like a charm. Thank you very much =)
I tried searching for “line-break” in google and the button-card thread, but wasn’t able to find it. Sometimes small details make the difference 
1 Like