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:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• 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.

• 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?

[mwrben]

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.

[mwrben]

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.

[mwrben]

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.

[mwrben]

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 #337 (comment):

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

[EF01]

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?

Yes, the issue is solved by this when editing in yaml. But still occours when editing in ui.

[duczz]

Any News how to fix this?

[greg520820]

Any News how to fix this?

Try clearing out your browser cache. Delete any store files or images in your browser. May also need to delete browsing history. On chrome just clearing files/images under settings fixed the issue.

[duczz]

@greg520820 nope not in my case :(, but thanks

[wernerhp]

Same thing. In storage mode, editing card mod styles works fine using Show Code Editor, but the card mod is lost immediately when using the Visual Editor.
It's not lost on save, but immediately when the card is selected.
See the card mods applied to badges in the following videos and how they go white as soon as the card is selected.

Mushroom cards
Core 2024.3.1
Frontend 20240307.0
card-mod 3.4.2

With extra_module_url configured

Screen.Recording.2024-03-20.at.09.36.43.mov

Removing extra_module_url appears to resolve the problem

Screen.Recording.2024-03-20.at.09.29.42.mov

It looks like it has to do with card-mod.js being included twice. When I remove either the one from resources or the one under extra_module_url it works fine.

[Gh0st-drive]

Still seeing this issue, tried all the above and still no luck.
Latest HA 2024.4.4
Card mod v3.4 3

[rubin110]

I've been running card-mod 3.4.0 to mitigate #354 or #400 or #346 or #359.

Today I updated HA to 2024.10.0, and sadly I'm now hitting the bug listed in this issue I'm commenting on. I've updated card-mod to 3.4.3 and the issue has now gone away. Sadly that means I'm back to a very sluggish UI.

[SergiPL]

I discovered, that content is not saved when you paste something containing TAB character. HA stores it as \t, cannot parse it and decides to ditch the changes all together.

I've changed it to spaces and it works every time.

BTW if you type TAB in Home Assistant Web UI Code Editor, it gets converted to spaces, but when pasted directly (from notepad++) it will contain real TAB character and will brake the parser.

[ildar170975]

@SergiPL
I took my example from the 1st post & used only spaces while inputting card-mod code - and anyway it was not saved....
Even this - w/o any spaces/tabs in a style - is not saved:

type: custom:bar-card
entities:
  - entity: sensor.system_monitor_processor_use
card_mod:
  style: "ha-card{color: red}"

P.S. I guess you were talking about saving "\t" inside a style option (which is either a string or a dictionary) because a whole code is stored in json.

[SergiPL]

@ildar170975 - sorry it didn't solve your issue, but still - someone can have those TABs and as they are quite difficult to track, I decided to share this information.

In your example however I see 3 strange things:

First - there is something wrong even before leaving the editor as the change of the colour to red should be visible immediately on a preview on the right. It should be instant (if you type "red", the very moment when you type "d" it should change the color) - like here:

Second (maybe irrelevant) - the bar-card component says it stopped being maintained 4 years ago... Perhaps you can try styling some standard out of the box HA component to check if the issue applies?

Third - in the post above there are unnecessary quotes: style: "ha-card{color: red}"

This is working for me 100%:

type: light
entity: light.lampkaostatni
card_mod:
  style: |
    ha-card {
      color: red;
    }

PS: yes that's what I ment.

[SergiPL]

And maybe you can also try to style component that is directly on the dashboard level (not inside vertical-stack) and see how that goes.

For vertical-stack this works for me:

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.lampkaostatni
    card_mod:
      style: | 
        ha-card {
         color: green;
        }    
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.lampka_srodkowy_switch_0
    card_mod:
      style: | 
        ha-card {
         color: red;
        }

[ildar170975]

there is something wrong even before leaving the editor as the change of the colour to red should be visible immediately on a preview on the right

It only happens if a defined style is supposed to affect UI.
In many cases I just specify color: red to see this style in Code Inspector; whether it affects UI or not - not important; kind of "proof of concept": if a test property is set in Code Inspector - then a required property will be set too (note: could be not accepted though if !important is needed).

bar-card component says it stopped being maintained 4 years ago

Actually, this was merely some example card; same happen with a stock Tile card, for instance:

type: tile
entity: sun.sun
card_mod:
  style: |
    ha-card {color: red}

BTW, styles for bar-card do work:

they are only not shown in Editor after reopening; if you close the Editor w/o saving - the style will be still applied.

in the post above there are unnecessary quotes: style: "ha-card{color: red}"

No, these quotes are necessary; but they may be omitted, i.e. these are same code:

xxxx: |
  yyyy

xxxx: "yyyy"

Yes, xxxx: yyyy & xxxx: "yyyy" is same - but what if yyyy contains ":" ?)))
Test this:

title: test-5
path: test-5
cards:
  - type: custom:bar-card
    entities:
      - entity: sensor.system_monitor_processor_use
    card_mod:
      style: ha-card {background-color: red;}

Note that card-mod is either a STRING or a dict of STRINGS.

And maybe you can also try to style component that is directly on the dashboard level (not inside vertical-stack) and see how that goes.

I honestly do not remember why I used vertical-stack in the example from the 1st post because it is irrelevant.

[SergiPL]

The example you gave with sun.sun component also doesn't work on my side. That's because internal span with text overwrites this with default colour (taken from --primary-text-color).

But this one works on my side:

type: tile
entity: sun.sun
card_mod:
  style: |
    ha-card {
      background-color: purple;          
      --primary-text-color: yellow;
    }    

Anyway - I can't replicate your issue on my local HA and I am out of further ideas. On my side - it just works correctly (once I enter the correct component definition).

[duczz]

i also checked my configs and my tabs was autoamtically converted to spaces, dont know why or when.

but the card_mods will be removed now in my cases only when card_mod is not fully loaded, when it is fully loaded it works, I don't know since when, so my case is closed :)

[ildar170975]

The example you gave with sun.sun component also doesn't work on my side. That's because internal span with text overwrites this with default colour (taken from --primary-text-color).

You seem to not get a purpose of using simplest color: red for testing which was described here...
This thread is NOT about "style is applied or not", it is about "code is not shown in Editor".

[SergiPL]

I get it, but I also think it is good to use something that actually shows on the screen. Anyway - good luck with solving your issue.

[ncodee]

Having the same issue on the latest HA/Card-mod versions.

Just wondering, has anyone here specified the perfomance code (below) in their config? I'm wondering if this maybe related...

frontend:

  extra_module_url:
    - /local/card-mod.js

It's either that, on it occurs when you add Keyframes animations code to card-mod.