not only that, Backup is broken…
as for entities spying, check this broken longer line of state value:
and note the 11:27…
Is it a custom card or smth standard?
Asking because do not have it.
Anyway, the last fix was not only for climate entities, it should process any “multiline” states.
(still thinking that touching hui-generic-entity-row was a bad idea)
this is an entities card with a sensor datetime
type: entities
entities:
- entity: sensor.last_boot
format: datetime
on tight screens like an iPhone.
took the modding out for the entities card and the entity to make it clearer:
wrote up an issue here long wrapping state value taking too much space · Issue #24009 · home-assistant/frontend · GitHub
yes the consequences are huge and not well thought through. Core cards (like above) and custom alike…
Pre2025.2 and With the latest fix:
or narrowed:
Who will think about custom cards…
Not the 1st time.
Again, as every release of HA this keeps on breaking the card-mod things: Introduce "Custom styles / Templates" section in core cards for much easier change of CSS/styling of cards (like bubble card) - #3 by stefan1982
Please vote for this, as this will also make YOUR life easier once you could simply alter the CSS of a card in the card styling section itself.
This way, things keeps breaking, but makes things a lot easier to directly go to the CSS-section that needs attention to fix it.
this will never happen in core I am afraid. they’re simpling frontend down, and adding css will be the contrary.
what is the link for the frontend discussion?
you should add it also to that FR, because now no-one will see it
The last card-mod thing which was broken by HA was “renderEntity”.
Other changes in HA frontend are not about “breaking card-mod” - they are merely about “changing frontend” which is NORMAL. Users should not expect that their card-mod customizations will work forever.
Of course some changes in frontend are not “life critical” but break customizations, custom cards etc (as I already said above, that initial fix for generic-entity-row was absolutely not necessary; it makes the row nicer since the row has larger active areas - but may break some customizations & custom cards…).
1 Like
yeah, and btw, there would be no difference, because when ‘they’ change the frontend, you would still have to adjust your css in the card, just as you need to do now.
I was hoping to get some help with a selector. It seems that selecting something in shadow root doesn’t really work for me. Here’s where I started to see if this would even work.
views:
- title: Wall Panel
path: kiosk
type: custom:ha-dashboard
card_mod:
style: |
ha-card {
border-style: unset;
border-radius: 0;
background: rgba(255,255,255, 0.5) !important;
margin: 0 !important;
flex-basis: 35% !important;
}
hui-masonry-view {
background: white !important;
}
The above modification to the background of hui-masonry-view works perfectly fine.
So, knowing that I can successfully select hui-masonry-view and modify that I assumed that I would be able to select child elements of hui-masonry-view as well. Here’s what I’m trying to select:
I want to be able to select the <div class="column" and here’s all the things I tried to do that
Attempt #1
hui-masonry-view$#columns>div {
background: white !important;
}
Attempt #2
hui-masonry-view$: |
#columns>div {
background: white !important;
}
Attempt #3
hui-masonry-view$: |
#columns: |
div {
background: white !important;
}
Attempt #4
hui-masonry-view
$: |
#columns: |
div {
background: white !important;
}
Attempt #5
"hui-masonry-view $ #columns": |
div {
background: white !important;
}
Nothing seems to work at all. If anyone has any suggestions I’d really appreciate it.
Thank you!
Not using this card, but:
- This is a wrong code, should be like “hui-masonry-view {” w/o a colon.
- “# this works” is a wrong way in card-mod since you are trying to use “#” inside a string. Use “/* this works */” instead.
What is this? 
Thanks, I edited to fix the mistake. However, that part of the code was working perfectly fine that wasn’t really my question. My question was more so how to select child elements underneath of hui-masonry-view. Since I can modify hui-masonry-view my assumption was that selectors of stuff underneath of it would also work but it seems it does not.
It was an error I made when typing here, my actual code was correct.
Since not a lot users use this “ha-dashboard” - it is difficult to help.
I may only speculate that it probably can be styled in card-mod-theme (card-mod-root-yaml).
Why would I be able to modify hui-masonry-view with card mod, but the child selectors wouldn’t work?
Also, personally me do not like these custom all-in-one ready solutions. Consider using a stock sidebar view modded (moved to the left side) either by a card-mod-theme or an external js.
Also, here there is wrong syntax:
hui-masonry-view$#columns>div {
background: white !important;
}
hui-masonry-view$: |
#columns: |
div {
background: white !important;
}
hui-masonry-view
$: |
#columns: |
div {
background: white !important;
}
"hui-masonry-view $ #columns": |
div {
background: white !important;
}
Must be
xxxx $: |
xxx {
...
}