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

ildar170975 commented 6 months ago

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:

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

Minimal steps to reproduce:

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

acccc

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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

johnwalk61 commented 6 months ago

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 commented 6 months ago

Similar behaviour observed with weather-forecast card:

ildar170975 commented 6 months ago

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 commented 6 months ago

Same Problem here

philrich commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

thomasloven commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

card_mod code not shown in Editor:

but it present in fact:

r01k commented 5 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 3 months ago

Any News how to fix this?

greg520820 commented 3 months ago

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 commented 3 months ago

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

wernerhp commented 3 months ago

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_urlconfigured

https://github.com/thomasloven/lovelace-card-mod/assets/2578772/1a5a2747-c76e-4d12-9ff3-aa27abfda27c

Removing extra_module_url appears to resolve the problem

https://github.com/thomasloven/lovelace-card-mod/assets/2578772/650e73ed-db69-4f30-ae44-caa28bd89bf8

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 commented 2 months ago

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

thomasloven / lovelace-card-mod

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