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.

[I-TensE-I]

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.

[John Walker]

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;
                }

[Julien Hondaâ]

Same Problem here