card-mod code may be not saved in UI editor - or just auto-deleted after typing - or may not be shown in editor

[ildar170975]

Chrome 120.0.6099.130 (Win10x64). FF 121 (Win10x64).

My Home Assistant version: 2023.12.1

My lovelace configuration method (GUI or yaml): storage

What I am doing: Adding card-mod code for custom:bar-card inside a standard vertical-stack. Using a standard HA UI editor.

What I expected to happen: Card-mod code is saved after saving a card.

What happened instead:

1. Either card-mod code is not saved after saving a card.
2. Or card-mod code is automatically deleted after typing.

Minimal steps to reproduce:

1. Add a new card - select any card like "Alarm card".
2. Switch to yaml editor.
3. Paste a code provided below.
4. Start typing "card_mod" for the "bar-card".
5. If you manage to type the "card_mod" line - then type the whole card-mod code (see below).
6. Save the card.
7. Reopen the card in the Editor.
8. Check that card-mod code was deleted.
9. Start typing card-mod again.
10. Check that "card_mod" line is auto-deleted after typing.

type: vertical-stack
cards:
  - type: custom:bar-card
    entities:
      - entity: sensor.processor_use

type: vertical-stack
cards:
  - type: custom:bar-card
    entities:
      - entity: sensor.processor_use
    card_mod:
      style: |
        ha-card {color: red;}

Error messages from the browser console: none related.

---

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.

[ildar170975]

If you manage to save your card-mod code - it is really saved in json:

And the style is applied:

But the Editor does not show card-mod code:

[ildar170975]

Not sure if it is related: card-mod info is not shown in Console when I fail to add the card-mod code in the Editor:

[OmegaPrime90]

I am having the same problem. When the code is not shown again when reopening the editor, if I save it strips the previously saved card-mod changes.

However, I am a novice with Card Mod. I do not use the "|" after styles. My previously-working code did not require it:

card_mod:
  style:
    mushroom-card: |
      :host {
        --mush-font-size: 0;
        --mush-icon-size: 50px; 
        --mush-icon-symbol-size: 0.8em;
        }
    ha-card: |
      box-shadow: none;
      background: none;
      padding: -5px !important;
      padding-bottom: 0px !important;
           }
    mushroom-state-info$: |
      .container {
       --card-secondary-font-size: 14px;
       --card-primary-font-size: 15px;
        gap-right: 0px;
      }

If I use that on a card, it works as expected. When I edit the card it disappears. When I save it reverts to unmodded.

edit: It appears that cards with edited card-mod code is stripped from the editor upon reload. Card-mod code saved prior to the latest version, and left unedited, does NOT appear to be stripped upon reload.

[ITensEI]

Same issue after updating to 3.4.1 in Firefox. Using UI Editor the card_mod: config disappears after saving the card. It then doesn't render the changes. However, looking in the Raw Config the card_mod: config is present.

[ildar170975]

@OmegaPrime90 Your code is absolutely wrong & could be confusing for other beginners.

[johnwalk61]

I am now forced to edit the cards in the raw configuration editor. Quite the pain to find the code in a large dashboard. I have it both as a resource and "extra_module_url" if that makes any difference. Also noticed that this only happens when a card opens to the visual editor, if a card does not have a visual editor it shows correctly. I am also in the Home Assistant beta path, perhaps that is a contributing reason?

[ildar170975]

Similar behaviour observed with weather-forecast card:

[ildar170975]

A probably related behaviour - but quite opposite:

• a card has a correct card-mod code in json
• the style is applied
• the card-mod code is not shown in Editor

      - type: vertical-stack
        title: modded
        cards:
          - type: weather-forecast
            entity: weather.home_met
            card_mod:
              style: |
                ha-card {
                  border: 1px solid red;
                }

[nonamejuju]

Same Problem here

[philrich]

Any news on this? I had the same problem, tried many things and suddenly the problem went away (I don't know what fixed it) but unfortunately only temporarily - since today the problem is back :-(

[philrich]

I removed

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

from configuration.yaml, restarted Home Assistant, cleared the browser cache and now its working again. Can anyone check if this is reproducible?

[gasman1844]

I've removed frontend: extra_module_url: - /hacsfiles/lovelace-card-mod/card-mod.js and the disappearing card_mod code problem seems to be resolved.

I found this thread https://community.home-assistant.io/t/install-card-mod-js-as-a-module-how/396758/9 which I think is saying that if you use lovelace in storage mode (i.e. using dashboard UI rather than in yaml), then this extra bit of yaml is not needed in the config file.

[gasman1844]

Sorry the link isn't correct, I'm new to posting here. The link is

https://community.home-assistant.io/t/install-card-mod-js-as-a-module-how/396758

[ildar170975]

which I think is saying that if you use lovelace in storage mode (i.e. using dashboard UI rather than in yaml), then this extra bit of yaml is not needed in the config file.

Where exactly it was said? Probably better to ask the plugin author first.

[gasman1844]

Post number 9

"You are using storage mode now. You don’t have to worry about this. You don’t need to add anything to your configuration.yaml file. Check the Configuration / Dashboard / Resources tab and make sure card_mod is listed there as a javascript module and you are good to go."

[ildar170975]

And you may add post 10 telling the opposite. Better to ask the author. May be that person was right, but this needs a proof.

[gasman1844]

Absolutely we need the author's opinion. So far in my own testing with the frontend resource removed the code is now saving correctly so maybe this is relevant or perhaps it's a coincidence.

[ildar170975]

Also, that line was added with a purpose. And many people (like me) work both with yaml & storage dashboards.

[thomasloven]

I am not at all able to reproduce this issue. The extra_module_url thing is supposed to improve the performance by making card-mod load in before anything else, and likely helps both in storage and yaml mode. It's definitely the only way to guarantee themes work for other pages than dashboards.

It may be a clue that this problem doesn't appear without it, but I still don't know.

[ildar170975]

I did not manage to reproduce on a fresh test HA installation. Only card-mod 3.4.2 is installed. HA 2024.1.2.

Installed bar-card, tested the code provided above - no glitch.

---

Updated to 3.4.2 on the main setup. Stopped seeing the glitch with weather-forecast card (described above). Still see the glitch with bar-card in vertical-stack.

[nonamejuju]

I removed

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

from configuration.yaml, restarted Home Assistant, cleared the browser cache and now its working again. Can anyone check if this is reproducible?

I can confirm that deleting this line, a HA restart and with a hard reload/cleared cache of the browser it is working fine. When I put the line back, and doing a reload/restart, the bug is back.

[ildar170975]

Case similar to https://github.com/thomasloven/lovelace-card-mod/issues/337#issuecomment-1874413651:

card_mod code not shown in Editor:

but it present in fact:

[r01k]

Yesterday I found out that I'm having this problem too.

Update:

I did as others above said removing the entry from configuration.yaml and the problem was fixed. I added the entry back and the problem is not happening either.

[EF01]

Same issue here. I tried removing - /hacsfiles/lovelace-card-mod/card-mod.js As mentioned above, without any luck. The codes still dissapears after editing in the ui.

[greg520820]

Same here. Card-mod code is deleted from the first tile card in a vertical stack when opening the card in visual edit mode and then saving. Card-mod version 3.4.2 and core-2024.2.2.

Started after updating to 2024.2.2, but also chrome was updated about the same time to version 121.0.6167.185.

Removing "frontend: extra_module_url: - /hacsfiles/lovelace-card-mod/card-mod.js" from configuration.yaml and restarting HA did not fix the issue.

[Se7enair]

For me removing the extra module is solving the problem.

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

But only when lovelace is set to yaml. In storage mode there is no improvement.

lovelace:
  mode: yaml

@thomasloven did you tried this to reproduce the problem?

@greg520820 and @EF01 can you confirm that you have lovelace set to storage and the fix is working if you change lovelace to yaml?

[greg520820]

@greg520820 and @EF01 can you confirm that you have lovelace set to storage and the fix is working if you change lovelace to yaml?

Always have been in storage mode. After removing "- /hacsfiles/lovelace-card-mod/card-mod.js" from configuration.yaml and restarting HA and host machine many times, trying to fix another issue, the card-mod code quit disappearing. Also had cleared the stored files and images in Chrome. Added the "- /hacsfiles/lovelace-card-mod/card-mod.js" back and have not had any problems.

[ildar170975]

But only when lovelace is set to yaml. In storage mode there is no improvement.

Sorry, how this can help to fix the glitch in yaml mode - if the glitch is observed only in UI editor, i.e. in storage mode?

[Se7enair]

But only when lovelace is set to yaml. In storage mode there is no improvement.

Sorry, how this can help to fix the glitch in yaml mode - if the glitch is observed only in UI editor, i.e. in storage mode?

This problem appeared in the UI editor, wether lovelace is in yaml or storage mode. Maybe I misunderstood something.

Neverteless I played around with my dashboard and at the moment it seems to be dissapeared as @greg520820 also experienced. Made a few restarts and reloads with deleting cache.

[ildar170975]

This problem appeared in the UI editor, wether lovelace is in yaml or storage mode. Maybe I misunderstood something.

When you are using UI editor (which may be switch between showing UI controls to define card's option & showing yaml editor for THIS card) - you are definitely using this dashboard in a "storage mode". When you go to a "raw yaml editor" by selecting "Edit -> Raw configuration editor" to edit a whole dashboard in yaml - you are STILL using a dashboard in a "storage mode".

A dashboard in a "yaml mode" is a completely different thing: to edit a dashboard you need to edit it;s yaml-files in some EXTERNAL text editor (in case of using HassOS - could be a pre-installed addon).