Closed Mariusthvdb closed 6 months ago
I think I might be experiencing the same issue. I am trying to remove a background/make it transparent on a card with auto entities and once the card updates with another entity the background comes back. I am pretty sure its the same issue.
card:
type: entities
style: |
ha-card {
background: none !important;
box-shadow: none;
}
There is a problem with card-modding a card inside auto-entities
.
Example 1 - style is defined for the internal card itself (result OK):
type: custom:auto-entities
card:
type: entities
card_mod:
style: |
.card-content {
padding: 0px;
}
filter:
include:
- domain: device_tracker
sort:
count: 5
Example 2 - style is defined from the auto-entities
level (result WRONG):
type: custom:mod-card
card_mod:
style:
hui-entities-card:
$: |
.card-content {
padding: 0px;
}
card:
type: custom:auto-entities
card:
type: entities
filter:
include:
- domain: device_tracker
sort:
count: 5
or
type: custom:mod-card
card_mod:
style:
auto-entities hui-entities-card:
$: |
.card-content {
padding: 0px;
}
...
But sometimes even w/o resizing the window etc - just after F5 - the style seems to be applied.
So, the problem is about using card-mod
for elements inside auto-entities
.
Since the badge-card
does not have a ha-card
element we need to place the card inside the mod-card
- but we cannot style it anyway from the auto-entities
level.
Another example - with fold-entity-row
:
W/o auto-entities it works OK:
type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: device_tracker
open: true
entities:
- device_tracker.iiyama
card_mod:
style:
fold-entity-row:
$: |
div#head {
color: red;
}
This does NOT work when using auto-entities
:
type: entities
entities:
- type: custom:auto-entities
filter:
include:
- domain: device_tracker
sort:
count: 5
card:
type: custom:fold-entity-row
head:
type: section
label: device_tracker
open: true
card_mod:
style:
fold-entity-row:
$: |
div#head {
color: red;
}
or
...
card_mod:
style:
auto-entities fold-entity-row:
$: |
div#head {
color: red;
}
just letting you know the update to 3.1.3 does not really help this issue (of the badges justify-content: space-around;
, dont know about the others that have mentioned issues here).
What is bit different now, is that I can get the mod to work upon a reload of the view or 2. Before, this didnt work and I needed to resize the screen
After update, my example with fold-entity-row + auto-entities still gives same unstable results:
But sometimes even w/o resizing the window etc - just after F5 - the style seems to be applied.
Probably the latest update was not purposed to fix this particular behaviour.
i have to agree with Ildar, and rewriting my auto-entities config in the opening post above to
type: custom:mod-card #needed for margin spread correctly (especially on iPhone)
card_mod:
style:
badge-card:
$: |
div#badges {
display: flex;
justify-content: space-around;
}
card:
type: custom:badge-card
badges:
- entity: person.marijn
card_mod: &badge
style: |
:host {
--ha-label-badge-label-color: black;
{% set zones = states.zone|map(attribute='name')|list %}
{% set id = config.entity.split('.')[1] %}
{% set activity = states('sensor.' ~ id ~ '_app_activity') %}
{% set cc = state_attr('sensor.' ~ id ~ '_app_geocoded_location','ISO Country Code')|lower %}
{% if cc and cc != 'nl' %}
--label-badge-red: white;
{% elif is_state(config.entity,'home') %}
--label-badge-red: green;
--ha-label-badge-label-color: gold;
{% elif 'bij' in states(config.entity) %}
--label-badge-red: gold;
{% elif activity in ['Automotive','Cycling','Walking'] or
states(config.entity) in zones %}
--label-badge-red: mediumslateblue
{% else %}
--label-badge-red: #636B75;
{% endif %}
}
- entity: person.2
card_mod: *badge
- entity: person.3
card_mod: *badge
- entity: person.4
card_mod: *badge
- entity: person.5
card_mod: *badge
- entity: person.6
card_mod: *badge
makes it work immediately. but I guess thats what I already said in the opening post... nevermind, just to stress this is still happening then ;-)
Marius, the issue should be renamed to "Styles may not be applied when using for auto-entities" probably...
changed that. thx
See no issues here:
type: custom:mod-card
card_mod:
style:
badge-card:
$: |
div#badges {
background: red;
}
card:
type: custom:auto-entities
card:
type: custom:badge-card
filter:
include:
- entity_id: input_boolean.test_boolea*
sort:
count: 5
not using this a anymore, but maybe also test the
badge-card:
$: |
div#badges {
display: flex;
justify-content: space-around;
}
mod, as that is what the issue was about? seems those space-xxx options are somewhat peculiar, and I can not pinpoint the cause at all times.
tbh, I am not even sure now, this is an auto-entities thing in the first place, though we all believed it was above? needs further inspection
This is not about a particular CSS property. These "flex" attributes will definitely work (with or w/o !important).
so are you saying the original issue doesnt exit anymore? then we can close?
This is up to you to decide, you are the author.
yes sure, but what I meant to ask is, if you can confirm the original issue (which you also experienced) is no longer an issue, we can close. as I dont use the specific config any longer (as a matter of fact I dont use those badges anymore at all) I would follow your conclusion here.
At least the code I posted here works OK.
thx. since I dont use the badges from the opening post anymore, nor have any card_mod set directly via any of the other posted examples above (eg using the mod-card), I dont experience this issue anymore, and will close.
thanks for taking part
My Home Assistant version: 2022.4.0.dev20220228
My lovelace configuration method (GUI or yaml): YAML
What I am doing:
showing badge card which is auto-filled by auto-entities and justify the badges
What I expected to happen:
immediate effect (as before, somehow latest are releases frustrate correct operation)
What happened instead:
need a resize window in the browser to have the mod be effective, ast least showing the mod is ok.
Minimal steps to reproduce:
using a fixed set of badges:
always works, proving the mod to be correct
Error messages from the browser console:
no errors
By putting an X in the boxes ([]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.