thomasloven/lovelace-fold-entity-row

Card-mod style is not modified on load with fold-entity-row

jjprz opened this issue · 4 comments

jjprz commented

My Home Assistant version: 2021.3.3

Fold-entity-row version (FROM BROWSER CONSOLE): 2.2.0

What I am doing:
Styling Secondary Information with Card-mod

What I expected to happen:
change the style

What happened instead:
The style of the secondary information is not modified. When I display the arrow the style is applied but on load it is not.

Animation

        - type: custom:fold-entity-row
          head: 
            type: custom:multiple-entity-row
            secondary_info:
              entity: sensor.humedad_dormitorio
              name: "💧"
              unit: '%'
            entity: light.bano_dormitorio
            icon: fas:bath
            toggle: true
          card_mod:
            style:
              multiple-entity-row $:
                hui-generic-entity-row $: |
                  .info .secondary { font-size: 11px !important; color: white !important; opacity: 0.5; }

Error messages from the browser console: No error messages
With other older versions of fold-entity-row it works.

jjprz commented

The problem only occurs when multiple-entity-row is in head

Probably same: #215

@jjprz
Try this code:

  - type: custom:fold-entity-row
    head:
      type: custom:multiple-entity-row
      secondary_info:
        entity: sensor.weather_home_met_temperature
        name: ❄️
      entity: sun.sun
      entities:
        - sun.sun
        - sun.sun
      card_mod:
        style:
          hui-generic-entity-row $: |
            .info .secondary { color: red !important; }
    entities:
      - sun.sun
      - sun.sun

image

Here card_mod is moved to the head level and the style is applied successfully.
If card_mod is located on the fold-entity-row level it works only in some conditions (check #215).
So, you issue seems to be a duplicate of #215 but has a good workaround.

Both variants work stable now:

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: custom:multiple-entity-row
      secondary_info:
        entity: sun.sun
        name: ❄️
      entity: sun.sun
      entities:
        - sun.sun
        - sun.sun
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style:
        div#head multiple-entity-row $:
          hui-generic-entity-row $: |
            .info .secondary { color: red !important; }
  - type: custom:fold-entity-row
    head:
      type: custom:multiple-entity-row
      secondary_info:
        entity: sun.sun
        name: ❄️
      entity: sun.sun
      entities:
        - sun.sun
        - sun.sun
      card_mod:
        style:
          hui-generic-entity-row $: |
            .info .secondary { color: red !important; }
    entities:
      - sun.sun
      - sun.sun

image

I think the issue may be CLOSED.