I am actually baffled that not a single person has the answer. Are you and I (and a very very few guys on github) the only ones in the entire community that use position: sticky ? I really find that hard to believe. I asked everywhere, but 99,9% of the people that saw the post just ignore it or give a workaround with `position: fixedâ, which is still working but as mentioned, it is a workaround and not really a solution.
I also do not quite understand why it is no longer working whereas position: fixed, position: absolute and position: relative still work fine.
For the height issue, try incorporating auto height on the info div into your code (I think itâs now hard coded at a set number of pixels after 2024.08):
did you read up on the fact it has something to do with position: sticky not working nicely with the overflow: hidden or, any of hidden , auto or scroll ? Most articles I found advise to set overflow: clip .
If you would need them on the individual mushroom-light-cards, then yes, set them in the template. cant use options as standalone option in the filter when you use a templates filter
I never tried anything like that, but, maybe you can also set the font to the stack-in-card, why not try it. It seems a generic mod, not state dependent, so you should probably be able to set it to all children,
you cant set it to auto-entities, as that is no card itself, the first card to be able to use card-mod on is the layout-card on your config
first create a hard-coded minimal card, of that structure, and find the element you need to modify. then work your way back to the more complete auto-entities creation
If I use this in a entities card, the title is red and the rest blue, like it should be.
But when I try this in a glance card, the title stays white, can someone help me?
Also, I want to change the padding and margin of the title and this doesnât work.
All I can suggest is that you look in your browserâs developer tools (F12 in Chrome/ Firefox) and see what the CSS is actually doing - youâre using quite complex CSS there, so maybe a chance to actually control what it does in the details.
I have the hardcoded card already, thatâs where I copied the styles from. I just didnât know how to get them into the template format - thatâs very confusing to me.
Didnât realize that auto-entities doesnât create its own ha-card. But thinking about itâŚof course not.
I wrapped the entire thing in a custom:mod-card. That seems to work.
Thank you very much for the input! This makes it a bit easier, plus all the styles (also for the parent card) are now in one place, which is also nice.
hi guys! Iâm new to CSS and for now I was able to solve a lots of customizing questions by googling and searching topics, but this question in partoicular is a nightmare for me, I have an old weather radar card, and Iâm trying to adjust size of it and customize a progressbar without success, and thats because all thet element are in shadow-root. can you please help me to reach out those element and chage properties?
First of all, you need to rework your CSS selectors - check this ressource.
You are targeting ids, these need to be selected using a #. Plus, for the second ruleset you left out a part of the id (progress-bar instead of div-progress-bar).
This was never going to work.
Regarding the mod_card specifics: <ha-card> is your starting point, not <weather-radar-card>. And if you look closely, youâll see that everything else is within ha-card, without a shadow-root in between. The shadow root below ha-card is a sibling of the cards your trying to target, not a parent.
So you should be able to just do the following:
card_mod:
style: |
#mapid {
your styles
}
#div-progress-bar{
your styles
}
I havenât tested this; give it a try and let me know if it works.
youâll need to keep navigating through the DOM. You can see in your dev tools, that if you want to target the state-badge, youâll need to get through the shadow-root just below div.entity
If you read through the documentation and familiarize yourself with the html structure of your cards, you should be able to figure this out on your own.
It took me a bit to get it sorted out as well, but once I reviewed the documentation in more detail and compared to the html, it all started to make sense.
Apologies if this is a super silly or previously answered question:
Is there any way to add CSS formating to:
Sections within section view? (i.e. the individual panes that hold the cards)
âcard wrappersâ such as horizontal stack or vertical stack?
Basically, anyhting that doesnât respond to the âha-cardâ default styling is still some kind of voodoo to me.
Iâd like to try out making the individual sections on the dashboard more tangible (give them a drop shadow, a background or transparency, while making the invidual buttons rather flat.
On a similar note, i canât seem to add a border / drop shadow / bg color to a custom:multiple-entity-row card. The âstyles:â line for this card only affects the tiny part around the rightmost value, not the entire ârowâ. I should be able to solve that with card_mod right?
I have a piece of code which gives my elements a certain width so I can view it properly on my mobile phone. After updating it seems to have broken something, canât figure out what exactly.
Itâs about the first card_mod piece, giving the elements a certain width (43/27/15/15), but it seems to completely ignore the code now so all elements show the same width, making the most left element unreadable.
