search

thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.08k stars 168 forks source link

Styles are not applied when used with auto-entities #184

Closed Mariusthvdb closed 6 months ago

Mariusthvdb commented 2 years ago

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:

# The least amount of code possible to reproduce my error
type: custom:mod-card
card_mod:
  style:
    badge-card:
      $: |
        div#badges {
          display: flex;
          justify-content: space-around;
        }
card:
  type: custom:auto-entities
  card:
    type: custom:badge-card
  filter:
    include:
      - domain: person

# End of code

using a fixed set of badges:

  - type: custom:badge-card
    card_mod:
    style: |
      div#badges {
        display: flex;
        justify-content: space-around;
      }
    badges:
      - sensor.weather_animated_icon
      - sensor.badge_wind_compass
      - sensor.wind_bft

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:

skynet01 commented 2 years 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;
     }
ildar170975 commented 2 years ago

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

image

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;
        }
...

image image

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;
        }

image

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;
        }

image

Mariusthvdb commented 2 years ago

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

ildar170975 commented 2 years ago

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.

Mariusthvdb commented 2 years ago

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 ;-)

ildar170975 commented 2 years ago

Marius, the issue should be renamed to "Styles may not be applied when using for auto-entities" probably...

Mariusthvdb commented 2 years ago

changed that. thx

ildar170975 commented 7 months ago

See no issues here:

image

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
Mariusthvdb commented 7 months ago

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

ildar170975 commented 7 months ago

This is not about a particular CSS property. These "flex" attributes will definitely work (with or w/o !important).

Mariusthvdb commented 7 months ago

so are you saying the original issue doesnt exit anymore? then we can close?

ildar170975 commented 7 months ago

This is up to you to decide, you are the author.

Mariusthvdb commented 7 months ago

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.

ildar170975 commented 7 months ago

At least the code I posted here works OK.

Mariusthvdb commented 6 months ago

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