Team,
After trying many times I failed.
Goal: make the gap between entities smaller
FIX: in this post.
Card: entities with card_mod AND a state_filter
Inspector:
Any ideas how I could make this work? 
Thank you!
@arganto
please see:
which is the result of:
card_mod:
style:
'.box div:nth-child(3)':
ha-state-icon $ ha-icon $: |
ha-svg-icon {
display: flex;
align-items: center;
}
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
ha-icon-button:
I tried adding your suggested code for vertical-align, and didnât t really see a lot of effect. checking the options listed at W3Schools CSS vertical-align demonstration (btw, no unset ) there were only a few that worked. vertical-align: -10% eg does move the icon.
the align-items: center dies work as you see. the icon is properly fixed in 1 place.
However, only the 1nth child is, and the second still circles around⌠added to that, they still stutter, so there might be 2 issues instead of only 1.
experimenting a bit more reveals this:
I think we can clearly see the icons are simply not positioned in de center, and the thermometer also is spinning around its top, and not middle of the icon. SO, maybe we should center the whole lineup?
unmodded makes that clear too:
even though the core code for the glance card frontend/hui-glance-card.ts at 5fb15042118684bdc76e4d98c2f0d6a2128feac0 ¡ home-assistant/frontend ¡ GitHub mentions align: center on all elements?
update
finally a little better, and conclusive on both align properties:
I had to copy the code for that on each individual element to get it to work for both:
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-state-icon $ ha-icon $: |
ha-svg-icon {
vertical-align: unset;
}
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
ha-state-icon $ ha-icon $: |
ha-svg-icon {
display: flex;
align-items: center;
}
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_rechts','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
@keyframes rotation {
etcetc
so, vertical-align: unset does work, and is identical to
display: flex;
# align-items: center; # this seems to be doing nothing, leaving only the display: feels suffices
that good to know.
I will see if I can get them to be fixed at the base position (just like the other icons). Still need to understand why the stuttering is happening, and how to prevent that.
This is 1 way, thou i know there is another (better) way, just canât find where i stashed it
card_mod:
style: |
hui-generic-entity-row {
height: 15px;
}
Guess it was here, or a few other post up ( sometimes it helps by using the search function in here 
)
Here is a quick solution:
Just found that I use entity_filter and I donât think card_mod works with that.
So I created a new entities widget, with 3 entities in it. Very basic but your code does not work.
Try this:
- type: entities
card_mod:
style:
.: |
ha-card div#states div {
margin-top: 0px;
margin-bottom: 0px;
}
entities:
Bear in mind that this will overide the margin settings for first and last child div on the card, which is 0px top and bottom respectively.
This means if you use any other value than 0px for the margins here, you will have to explicitly set the top margin value for first child to 0px, and the bottom margin value for last child to 0px again.
1 Like
You have to place the âcodeâ on each entities, thou i guess that entity-filter and auto-entities does make it a bit âdifficultâ
Edit2: thou this is in a basic entities_card with a custom:fold-entity-row, with each entities as type: custom:multiple-entity-row
Seems working for me !
1 Like
@reste_narquois
Itâs working! At first it didnât but then I realized I was applying card_mod to entity_filter and not the card itself.
Before: the card_mod section below was at the root level.
After: I prefixed with the card_mod section 2 spaces â hurray. Simplified version:
type: entity-filter
entities:
- entity: counter.frontdoor_today
- entity: counter.backdoor_today
state_filter:
- operator: '>='
value: 0
card:
type: entities
title: Today Counter
card_mod:
style:
.: |
ha-card div#states div {
margin-top: -10px !important;
margin-bottom: -10px !important;
}
how can i make this white text yellow?
i tried to put a style around with yellow but failed
That this is misaligned, I told you yesterday. Unset is working. And my adapted one from your example above, posted yesterday is working. I wonder, why you donât take this as stating point instead of playing now around again from scratch. 
Ask in a custom:button-card thread.
I think I misunderstood you there. Didnt realize you were in fact pointing to the core glance card itself.
still, the source I posted doesnt mention anything else than âcenterâ. SO I already mentioned that in #devs_frontend, and maybe someone there will jump in there to point me to the specifics in that file.
believe me I have.
Only posting the more final results⌠which lead me back to what I had before, but with the Unset option you suggested indeed.
And on the âis workingâ: that is only for the alignement, not the stuttering. Which is maybe even more annoying then the off center,
I managed to squeeze lines with âcustom:vertical-stack-in-cardâ, all cards are custom:button-card and under styles you add padding:
type: custom:vertical-stack-in-card
cards:
- entity: sensor.temperature_home1
type: custom:button-card
name: temperature1
styles:
card:
- height: 20px
- padding: 0px 0px 0px 0px
- entity: sensor.temperature_home2
type: custom:button-card
name: temperature2
styles:
card:
- height: 20px
- padding: 0px 0px 0px 0px
.....
without âpaddingâŚâ height lower than 30px doesnât have any effect, while with padding it does.
O.k. Saw now that a input_boolean (my example) icon has another ha-icon level, which a switch icon (your case) does not have.
So please test again this example 1:1 copy
type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- switch.vijverpomp_links
- switch.vijverpomp_rechts
- input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_temperature
- binary_sensor.vijverpompen
card_mod:
style:
.box:
div:nth-child(3):
ha-icon-button:
ha-state-icon:
$: |
ha-svg-icon {
vertical-align: unset;
}
.: |
.box div:nth-child(3) div:nth-child(1) ha-icon-button {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
.box div:nth-child(3) div:nth-child(2) ha-icon-button {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
.box div:nth-child(3) div:nth-child(1) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
.box div:nth-child(3) div:nth-child(2) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
Still need to understand why the stuttering is happening, and how to prevent that.
This is because of the alignment (coming from :host. If you rotate a square, in which the icon is not centered, you will see, what you saw.
1 Like
looks like ha-icon-button.more-info has replaced mwc-icon-button.more-info. Was having no success getting rid of the three-dot menu for my card until I discovered this tidbit in another thread.
thank you Arganto, 1:1 results in
the animation is better now, and as you can see they are still off-center.
whatâs also obvious now is the most right icon (boolean) being higher than the thermometer and binary. The whole right block seems elevated
whatâs more, if I comment the first .box mod it show like:
# .box:
# div:nth-child(3):
# ha-icon-button:
# ha-state-icon:
# $: |
# ha-svg-icon {
# vertical-align: unset;
# }
so still smoothly animated, and the right icon on the same height, though more to the right
I donât have any clue and still expect, that you are not using it 1:1 as basis. Or you are on another frontend branch/version. Oder the custom UI or another plugin does a change. But anyway, as you have a working example above, use it.
If you want the other icons aligned, you should do the unset exercise there as well.
not sure why you wouldnât trust me on this, I copied your whole code and commented my own⌠really dont like being a suspect.
and yes, I am on latest frontend in dev nightly, but that probably doesnt matter, since this has been happening for a long time. Card-mod would be the same version I guess, since that too hasnât been updated.
I did manage to do this now:
type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- switch.vijverpomp_links
- switch.vijverpomp_rechts
- input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_temperature
- binary_sensor.vijverpompen
card_mod:
style:
.box:
div:nth-child(2):
ha-state-icon $ ha-icon $: |
ha-svg-icon {
vertical-align: unset;
}
div:nth-child(3):
ha-state-icon $ ha-icon $: |
ha-svg-icon {
vertical-align: unset;
}
which results in:
smooth animation, fixed height (albeit too high for the spinning icons).
can we shorten that code a bit too, as to not to have to repeat to for both icons?
other than using an anchor:
card_mod:
style:
.box:
div:nth-child(2): &flex
ha-state-icon $ ha-icon $: |
ha-svg-icon {
vertical-align: unset;
}
div:nth-child(3): *flex
I think the card is placing the entities and icons somehow randomly and it might be, that it is here not working, what is working on your side.
Here, both icons are in one div. The second. I seems to be, that on your side they are in different divs.
Because of this, most probably I cannot reproduce or suggest changes. But from a card_mod perspective, it should not make a difference in having this twice or line-optimized here.
For me, the otheres are too low.
yes, that is puzzling, because the divs I use in the:
.box:
div:nth-child(2): &flex
ha-state-icon $ ha-icon $: |
ha-svg-icon {
display: flex;
}
div:nth-child(3): *flex
are not the same as the divs in:
.box div:nth-child(3) div:nth-child(1) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
.box div:nth-child(3) div:nth-child(2) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
and if I set it to the same divs as in the section under .: the effect is identical:
card_mod:
style:
.box:
div:nth-child(3) div:nth-child(1): &flex
ha-state-icon $ ha-icon $: |
ha-svg-icon {
display: flex;
}
div:nth-child(3) div:nth-child(2): *flex
does this help:
exactly, and I have mentioned that in #devs_frontend , but no-one has chimed in yet. If that is a bug, it should be fixedâŚ
must confess I can t be sure about the image on Picture glance card - Home Assistant . Are they centered with the text?
some final observations:
consider the plain config (without the boolean toggle which I dont need anyway in this glance) without any mod. As stated in the docs, they are placed on the right side:
already below center.
then I add the animation mod:
which keeps them at the correct spot, (but already circling out of center)
then the second mod on the vertical unset:
suddenly moves the icons to the leftâŚ
this whole picture-glance is something of a mystery.