need help to narrow buttons of cover-entity in entities-card:
I have search this thread (and others) and could already manage to reduce the height of my entity card. Thanks for this.
I still want to optimize the card and ānarrowā the buttons of the cover entity:
Using the browser developer console with F12 I have already found out that if I set the CSS āmargin-left: -20px;ā in the appropriate place, the buttons are displayed the way I want them. Here I have to set the CSS:
Hi Ildar_Gabdullin,
thanks for giving some hint.
Of course it is not about blind copy/paste.
Quite sure I saw this āsyntaxā somewhere. But thatās the/my problem. As long as one does not really understand things, one has to ask and try.
I find your sample abstract and can not get my concrete isue to work with it
I understand the dictionary thing with the shadow elements.
But I am not sure what you mean with āsome stringā and where to put the ādivsā existing in my concrete DOM.
Could you please give a more concrete sample, maybe even with the objects from my DOM?
Thanks a lot for any push in the right direction
Any chance someone can help me out setting pointer-events to none on the alarm panel feature mode buttons?
Iāve tried adding it to my existing tile card mods but canāt make it happen.
Only need to use the tile card as monitor for the mode and donāt want interaction ( it may show the tooltip thoughā¦)
O and I would love it per button, since the disarm should be reachableā¦
Hello, please help me, I canāt get rid of the white gauge bordersā¦ I tried border: none; but for some reason this doesnāt help meā¦ Maybe someone can tell me how to get rid of white borders?
Assuming this is not a copy/paste issue, your card_mod section doesnāt appear to be indented far enough.
At the moment itās effectively at the level of the custom:stack-in-card (and therefore not being applied to anything as far as I can see) rather than the level of the gauge card.
I am using a tilecard to show the output of the jokes integration. The tilecard will only show 1 line of text by default and cut off the rest like this.
But I could make it display completely with the cardmod addition below. It would wrap the text and the tilecard would extend the height so it would show the complete text.
However this stopped working with 2024.8. Now it still wraps the text like before, but the tilecard does not extend in height anymore resulting in the text becoming only partially visible.
I tried poking around in the developertools, but I canāt figure out what is causing the height to stay fixed and not autogrowing like it did.
Anyone have an idea on how to control the height of the tilecard?
If you encounter issues like this, all you have to do is open your dev tools, select your troublemaker (in this case the actual text of the joke) and start investigating. I filtered for height css styles and went up level by level until I found an element with a fixed-height. Itās pretty simple, actually
I theory yes, but in practice not always
CSS always stays quite mysterious to me.
Anyway, thanks to your help I managed to get the card-mod code updated. While changing from the developertools worked perfectly it did not want to take the value from card-mod initially. It seems it gets overridden somehow as it also showed a strikethough in the developertools on my height:auto. In the end I put ā!importantā in there and it now works.
Note that the icon seems to be vertically aligned in the middle when the height grows beyond the standard height. The icon used to stay top-left. Will try to figure that out next.
yes, thatās very common if you want to overwrite styles with card_mod - that can have multiple reasons. Either due to specificity of CSS, as youāre normally targeting just a simple html tag, sometimes a class, while HA likely often takes multiple chained classes for styling.
Another reason (probably the case in your situation) is the order of style application - probably card_mod gets injected earlier in the code than the other styles and it will just take the very last style being applied to an element.
The tile card is a flexbox, so you should be golden with:
.icon-container {
align-self: start !important;
}
This puts just the icon at the top. If you have a use case where the icon is larger than the text, then you could also do align-items: start on the entire flexbox, but that seems unlikely.
Thx! Will try when I return next week. Suppose this also blocks the tooltip when hoveringā¦?
It would be even better if we could only block the action
do you mean the āHomeā, āAwayā, etc. tooltip? Yes, that is blocked as well. But Iām sure thereās a way around that. Maybe thereās an alternative to the pointer-events: none; or otherwise this can probably be done with an ::after element as well. Youād then just create your own tooltip to mirror what youāve had before.