Card-mod with entity-filter card - does not apply styles when entites show up

Configuration
1

Hello!!

I’m using card-mod with the following card:

type: entity-filter
theme: amoled
entities:
  - entity: binary_sensor.my_sensor
state_color: true
state_filter:
  - 'off'
card:
  type: glance
  show_state: false
  style: |
    :host {
    --paper-font-body1_-_line-height: 1em;
    font-size: 2em;
    --paper-item-icon-color: red;
    --mdc-icon-size: 30px; 
    }

The problem is, that the dashboard renders proper style only when I enter it. When the my_sensor entity goes to off and then goes back to on - it is unstyled until I refresh the dashboard.

Is there a way for card-mod to add styles even while the dashboard is displayed, without the need to constantly refresh it?

1 Like
2

I am having this exact same issue. I wonder if @thomasloven has ever seen anything similar. I wouldn’t even mind “constantly refreshing” it if there was someway to do it cleanly, but I’d obviously like the styles to just load when the entity changes state.

3

I think the fix has something to do with the custom:mod-card. I think the docs used to specifically mention entity-filter, now it sort of hints at it with “Most likely your card contains another card”. I’m going to look into examples of custom:mod-card and see if that gets it working.

4

I tried to rewrite this with the custom:mod-card wrapper around the entity-filter. It seems to behave pretty much as before. The styles load on page load, but not on entity state change I only left one entity in this example, but I have several in reality. If anyone has any thoughts, let me know.

card:
  type: entity-filter
  entities:
    - entity: switch.bed_lamp_socket_1
      name: Bed Lamp
      show_state: false
      state_filter:
        - 'on'
  show_empty: false
  card:
    type: glance
style:
  .: |
    ha-card {
      font-size: 30px;
      line-height: 40px;
      height: 225px !important;
    }
  ha-card>hui-entity-filter-card>hui-glance-card:
    $:
      ha-card>div:
        div:
          $: |
            state-badge {
              height: auto;
              width: 100px;
            }
          $state-badge$ha-state-icon$ha-icon:
            $: |
              ha-svg-icon {
                height: auto !important;
                width: 100px !important;
              }
          $state-badge$ha-state-icon:
            $: |
              ha-svg-icon {
                height: auto;
                width: 100px;
              }
type: custom:mod-card
5

Again - similar questions is better to ask in a dedicated card-mod thread instead of creating 100500 threads about same questions. At least you will get your answers faster.

6

Thanks, I found some links of your I’m going to put here so I have a chance of finding them again later. I find this forum difficult to use. I think I noticed the card-mod thread but thought it was old 2019, didn’t realize it was still active.

https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1396
https://community.home-assistant.io/t/lovelace-multiple-entity-row/109109/270

7

More than alive.
Trying to make it structured.