Styles not applied on first page load

patrickli commented 1 year ago

I know this bug has been reported a couple of times https://github.com/thomasloven/lovelace-card-mod/issues/218, https://github.com/thomasloven/lovelace-card-mod/issues/208, https://github.com/thomasloven/lovelace-card-mod/issues/204#issuecomment-1149183795 (indirectly).

But

I think I have written the style in the correct way.
You can reproduce this with the test code shipped in this project https://github.com/thomasloven/lovelace-card-mod/blob/master/test/views/3_badges.yaml. The sun badges will not have the intended colour on the first page load.

My Home Assistant version: 2023.4.6

My lovelace configuration method (GUI or yaml): GUI with RAW yaml editor

What I am doing: trying to change the colour of the icon and border of badges.

What I expected to happen: The badge will show with the colour I specified via card-mod style.

What happened instead: The badge shows original colours. If navigate to a different page and go back, the specified colours then shows up.

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
title: Home
views:
  - path: ''
    title: Home
    icon: mdi:home
    badges:
      - type: entity-filter
        entities:
          - entity: binary_sensor.entrances
            card_mod:
              style:
                ha-state-label-badge $: |
                  ha-label-badge {
                    --ha-label-badge-color: var(--label-badge-yellow) !important;
                  }
                  ha-state-icon {
                    color: var(--state-binary_sensor-door-on-color, var(--state-binary_sensor-on-color, var(--state-binary_sensor-active-color, var(--state-active-color))));
                  }
        state_filter:
          - 'on'
# End of code

Error messages from the browser console: None

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.
[] 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.

vmishurov commented 1 year ago

Same HA version. Same trouble. Simple example

type: picture-elements
image: blablabla.png
elements:
  - type: icon
    icon: mdi:biohazard
    style:
      top: 50%
      left: 50%
    card_mod:
      style:
        ha-icon $: |
          ha-svg-icon {
            color: red;
          }

On first page load i see icon element not red :(

ildar170975 commented 1 year ago

On first page load i see icon element not red :(

Very strange, in my setup the icon is always red after F5, after switching tabs. Chrome + Win10.

vmishurov commented 1 year ago

I tested on: Chrome 112.0.5615.139, Edge 112.0.1722.68, Firefox 108.0.1 Windows 10 21H2

Home Assistant 2023.4.6 Supervisor 2023.04.1 Operating System 10.1 User interface 20230411.1 - latest

Lovelace configuration method - GUI and yaml editor.

Always after hit F5 icon not red.

Compare DOM. After F5 2023-05-03_21-40-17 After edit and save page. Or go to another page and back 2023-05-03_21-42-16

I tested (with same result) on simple panel:

{
  "version": 1,
  "minor_version": 1,
  "key": "lovelace.dashboard_test",
  "data": {
    "config": {
      "views": [
        {
          "type": "panel",
          "title": "card-mod-test",
          "path": "card-mod-test",
          "badges": [],
          "cards": [
            {
              "type": "picture-elements",
              "elements": [
                {
                  "type": "icon",
                  "icon": "mdi:biohazard",
                  "style": {
                    "top": "50%",
                    "left": "50%"
                  },
                  "card_mod": {
                    "style": {
                      "ha-icon $": "ha-svg-icon {\n  color: red;\n}\n"
                    }
                  }
                }
              ],
              "image": "blablabla.png"
            }
          ]
        }
      ]
    }
  }
}

vmishurov commented 1 year ago

It seems I found a solution. After add to configuration.yaml

frontend:
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js

style is applied correctly. Now icon red after F5 !

patrickli commented 1 year ago

I have this already configured. Mine is installed via HACS so it looks like.

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

But

It start to work overnight without me changing anything.
The console still prints You may not be getting optimal performance out of card-mod. See https://github.com/thomasloven/lovelace-card-mod#performa with the above configuration set. I'll create a separate ticket for this.

ildar170975 commented 1 year ago

The console still prints You may not be getting optimal performance out of card-mod. See https://github.com/thomasloven/lovelace-card-mod#performa with the above configuration set. I'll create a separate ticket for this.

Already exists: https://github.com/thomasloven/lovelace-card-mod/issues/267

patrickli commented 1 year ago

The console still prints You may not be getting optimal performance out of card-mod. See https://github.com/thomasloven/lovelace-card-mod#performa with the above configuration set. I'll create a separate ticket for this.

Already exists: #267

Yes I just realized. I made a PR with a different approach than the other one. Feel free to pick whichever you like.

thomasloven / lovelace-card-mod

Styles not applied on first page load #279

Error messages from the browser console: None