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

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.

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:

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

About this issue

  • Original URL
  • State: open
  • Created 6 months ago
  • Reactions: 7
  • Comments: 37 (13 by maintainers)

Most upvoted comments

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

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:

изображение

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