2024.8.0 - Markdown cards not loading classes on page load until theme is reloaded

[th3jesta]

My Home Assistant version: 2024.8.0

My lovelace configuration method (GUI or yaml):
Both.

What I am doing:
Applying a class to a Markdown card so custom CSS in theme file loads.

What I expected to happen:
Class should load and styling should apply to card on page load.

What happened instead:
Class does not load and styling does not apply to card on page load until frontend: Reload themes is called, every time the page is loaded. This only happens in 2024.8.0 and has been reported by many of my theme users. See below video for a demonstration.

Untitled.mov

Minimal steps to reproduce:

# Theme file
Test:
  card-mod-theme: Test
  card-mod-card-yaml: |
    .: |
      ha-card.test {
        background: green !important;
      }

# Card configuration
type: markdown
content: '# no class'
card_mod:
  class: test

Error messages from the browser console:
None.

---

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.

[th3jesta]

FWIW, I have confirmed that applying styles directly to the markdown card works as expected on page load, which seems obvious since it's not loading the styles from the theme.

[ildar170975]

Confirmed, and I observe it to Markdown particularly (Entity, Entities - work OK).

[WoodenDuke]

Same here. My LCARS theme is fully unusable with 2024.8.
Reverted to 2024.7.4 and everything showed up fine again.

[Mariusthvdb]

did anyone check the markdown card resource for changes in the Dom? if they changed the resource, we should be able to find it there.
Although... the fact we can use the mod directly on the card would maybe indicate a change elsewhere in HA than the markdown card perse.

[derkork]

This could be some kind of race condition, at least sometimes the CSS seems to be applied to the markdown card. Note how the results differ when I navigate between the pages. You can always see some headers/footers where it worked and some where it didn't and these change every time. So I strongly suspect some timing problem here.

2024-08-14_06-50-31.mp4

[neoKushan]

Yup, I'm seeing the same behaviour - sometimes it loads the class correctly, sometimes it doesn't. Even the same Markdown element duplicated will sometimes only pick up the style on one of them.

[csanner]

Same behavior here.
Is there any debugging I can do to help with this effort?

[BigTrikerTom]

With me this behavior likewise appears. Unfortunately, many Themes are thereby useless.

[paulmthomas2]

Same issue for me also - LCARS theme specifically.

[chimera388]

Adding my voice that this intermittantly occurs on my LCARS themed dashboards as well. Regular refreshes do not solve the problem. It occurs in Fully Kiosk browser as well as the Home Assistant app

[OrigSorceror]

I too will add my voice to this issue. Building my own LCARS based them in Kiosk/panel mode for a non-admin user So the option of a reload themes button is out of the question as user does not have priveledges to run the service :(

have to hit the reload service everytime i make a change and refresh the panel. sometime multiple preses just to get it to display correctly.. I also making heavy use of markdown cards as i also implement some customised font colours and decorations.

[LukeBH]

I too will add my voice to this issue. Building my own LCARS based them in Kiosk/panel mode for a non-admin user So the option of a reload themes button is out of the question as user does not have priveledges to run the service :(

have to hit the reload service everytime i make a change and refresh the panel. sometime multiple preses just to get it to display correctly.. I also making heavy use of markdown cards as i also implement some customised font colours and decorations.

I worked around this by creating an automation to reload the theme then adding a button to the non-admin dashboards that runs the automation. Works like a charm, though it will be better once this issue is fixed of course.

[Joshthynne]

I too am experiencing this exact issue.

[j0hnby]

+1 for experiencing this. Please shout if anything is needed to get more data/test/check.

[antimidas]

Same experience here. Markdown issues. No header, footer, etc

[ildar170975]

With my all due respect to people confirming this issue:
The issue does present.
It is not about a particular LCARS theme - it about using classes for Markdown.
Long threads containing mainly “+1”, “me too” are not informative.

[antimidas]

With my all due respect to people confirming this issue: The issue does present. It is not about a particular LCARS theme - it about using classes for Markdown. Long threads containing mainly “+1”, “me too” are not informative.

oh, does it not give a general idea how widespread it is?

[ildar170975]

does it not give a general idea how widespread it is?

Useless information. If something is “0” - it will not become “1”.

[ildar170975]

@antimidas

Good luck with your project and being an asshole

The great card-mod plugin - not MY project, unfortunately )))
I am just trying to support users here & Community, including stubborn and rude ones like you, @antimidas ))

[neoKushan]

Both of you could could do with being a bit more tactful, the bickering isn't helpful to anyone.

Can we please keep this issue on topic.

[ildar170975]

Both of you could could do with being a bit more tactful, the bickering isn't helpful to anyone.

Please tell it to a person who started using words like “asshole” and thus exposed himself as a jerk 🤷. I just replied him.

Once again:

1. The issue is very simple: create a simplest theme with “color: red” and see how it stop working after F5. Check if same simplest card-mod style works fine if applied directly (w/o a theme) and if it is consistent after F5.
2. Same posts like “+1” are not useful. What is useful: “tested in HA 2024.x with card-mod x.x - and I do not see the issue”.

[larp-welt]

I have the same problem even in

• Chromium (Version 128.0.6613.84 (Offizieller Build) snap (64-Bit))
• Chrome (Version 128.0.6613.36 (Offizieller Build) beta (64-Bit))

Reload works sometimes to fix it. I'm using CARD-MOD 3.4.3 .

No errors I can connect to this problems are visible in the browser console.

[neoKushan]

Not really a surprise but for confirmation I am still seeing this issue on HA 2024.9.0

[WoodenDuke]

Unfortunately, even 1 month later, there is no reaction from the card-mod team to the (at least for me) critical error (dashboard fully unusable).

You're doing really good work in your free time - thank you for that!!!

But it would still be nice if you at least sent a short "accepted, but it will take a while" message. Some issues have been open here for over three years without any response...

Since I have no idea how long the error will remain, I unfortunately had to uninstall LCARS and no longer use card-mod, otherwise my wife will give me hell with the unusable display ;-)
So I've now completely gone back to the HA standard - maybe a generally good decision for the future...

By the way: at first the family doesn't want something like that in the house, but later it has to work without errors. Kind of funny :-)

[ildar170975]

, I unfortunately had to uninstall LCARS and no longer use card-mod, otherwise my wife will give me hell with the unusable display ;-)

You are exaggerating the issue.
It can be easily solved:

1. Create a decluttering template simply calling a Markdown card and passing “title” and “content” variables into this Markdown card. Add a required card-mod code directly into this template.
2. Replace all Markdown cards in your views by this decluttering card.

When the issue with card-mod is solved - simply remove/comment card-mod code in the template.

[WoodenDuke]

First of all, thank you for the tip, which I'm sure others can use now!

I counted my old LCARS dashboard - 155 markdown cards, all with card-mod code. Maybe I'm misunderstanding this, but I would have to customize all the markdown cards and copy all the code into the templates.
And since there are other issues affecting me, the possible problems after updates aren't worth it - but that only applies to me.

Nevertheless, thank you again for your effort!

[j0hnby]

Would you mind sharing examples to those of us not understanding you?

…

-------- Original Message --------

On 08/09/2024 23:11, ildar170975 wrote: > 155 markdown cards, all with card-mod code. Do you mean that your Markdown cards have ADDITIONAL card-mod code - i.e. in addition to card-mod-theme from LCARS? If these Markdown cards have only difference in “title” and “content” - then you can replace these cards by one common template as it was described above. BTW, this “155” number frightens me))). If the Markdown card is used along with other cards in combinations - have you considered to use decluttering template for these “combinations”? In my setup I have (almost) zero of repeating code. — Reply to this email directly, [view it on GitHub](#392 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AEMGWC3FC6RERGBBBRFBJ3LZVTDRPAVCNFSM6AAAAABMG7ORE6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZWHA2DCMRZGY). You are receiving this because you commented.Message ID: ***@***.***>

[csanner]

155 markdown cards, all with card-mod code.

Do you mean that your Markdown cards have ADDITIONAL card-mod code - i.e. in addition to card-mod-theme from LCARS? If these Markdown cards have only difference in “title” and “content” - then you can replace these cards by one common template as it was described above. BTW, this “155” number frightens me))). If the Markdown card is used along with other cards in combinations - have you considered to use decluttering template for these “combinations”? In my setup I have (almost) zero of repeating code

I don't know about op but for my it's a series of vertical stack cards with different title and content values.

And I'm sure you've got lovely beautiful dashboards but there is a dearth of good tutorials for this.
If you've got one, please share

[ildar170975]

@csanner
I do not have ready tutorials particularly for the decluttering card; read Docs for this card first.
There is HA community where we can discuss our using of cards and share experience.
Here in this repo discussing the decluttering card is offtopic.

[neoKushan]

I don't think discussing a workaround to the issue currently present in this repo is offtopic, just because it uses a different addon - if it's a valid workaround, then it's fair game. I mean this topic was started because of the LCARS theme, so by the same extension it would be offtopic.. However, the reason people are asking for a tutoral/guide on your suggestion is because it's not clear how it solves the issue, either. I am familiar with the decluttering card, but I don't see how it helps card-mod not loading correctly.

With the LCARS theme, Markdown cards are used quite heavily to add what I guess you'd call "flair", lots of headers, dividers and footers, etc. so it's not unreasonable or unexpected for someone to have 100+ of them. Thus while your suggested workaround is a welcome one, it's not an "easy" fix.

The easiest workaround I've found is somewhat of a hammer to crack a nut, this automation:

alias: 0 - Reload Themes Every 10 seconds
description: Workaround for broken LCARS
trigger:
  - platform: time_pattern
    seconds: /10
condition: []
action:
  - action: frontend.reload_themes
    metadata: {}
    data: {}
mode: single

It calls reload_themes every 10 seconds so that even if the page doesn't load correctly, it'll fix itself within a few seconds. It's not the most efficient thing in the world, but it works for me.

[Mariusthvdb]

my 2cnts:
a more efficient workaround than triggering an automation every 10 secs would be to save the particular mods in a dedicated yaml file,

# box_shadow_none
style: |
  ha-card {
    box-shadow: none;
  }

and then add that to any card you require via an include:

type: markdown
card_mod: !include /config/dashboard/card_mods/box_shadow_none.yaml

it would be a 1 liner in the actual markdown cards, so not that much of a waste

this is only possible in yaml mode unfortunately

also, if this is actually the consequence of HA 2024.8, then you would need to try to get in touch with HA devs, to see what they changed, making classes not load on Markdowns any longer.
some form of investigation would help the repo here get to a solution sooner.
you could check the Discord channel https://discord.gg/bGPrdkPJ and find Karwosts.

[ildar170975]

card_mod: !include

I assumed that most suffering users using a storage mode - so proposed a “decluttering card” way.
In yaml mode - surely the “include” way (in case of one file - even a simple yaml anchor) is much easier way.

(untested) or try using an external js-file to style markdown cards (a positive negative effect - ALL markdown cards in HA will be styled).

[ildar170975]

That does NOT solve the issue tho. It isn’t some easy fix for everyone

Probably because YOU have not tried solving it.
“Disliking” and calling contributors “asshole” is much easier than putting own efforts.

[Mariusthvdb]

That does NOT solve the issue tho. It isn’t some easy fix for everyone. If so confident why not make a tutorial.

you are aware this is not a helpdesk?
some people frequent this repo, to help out others none the less.
However, not if demands are put forward like you do I am afraid. your tone of voice really makes those helpful people shrug. Especially when not showing any effort yourself.
demanding others to create tutorials, well, that is astonishingly insolent

in other words:
tone down the attitude, give it some effort yourself, and maybe people will help you. Unless of course any hint they throw at you is dismissed by you.

and there will be no real fix at all, because the author of this repo has not chimed in, and he is the only one that could truly fix (if it's an issue in Card-mod).

[j0hnby]

People keep mentioning to use a decluttering template - that's great.

Would one of you using that please share a quick example, not asking for a full on tutorial, just copy and paste what you do to achieve this showing the LCARS code too? Yes, I am reading the docs for decluttering, still having this example would be a big old speed boost please.

[Mariusthvdb]

show us what you did, so we can help you out

please make it only a small example (like I did above), and not a complete fleshed out configuration

[j0hnby]

I haven't done it yet - that's my point. People are saying "use the decluttering template" and not sharing an example to help people start it off..

So far, I have done as per the instructions on the LCARS theme

type: vertical-stack
cards:

• type: markdown
  content: '# Kitchen'
  card_mod:
  class: header

Pretty basic

[ildar170975]

Three ways we have:

1. decluttering - need to change all your markdown card’s calls
2. Include/secret/anchor - easier but works in yaml mode only
3. so try someone an external js-file - it will require only one file added as a resource. I am in my next shift now, do not have access to pc, will come back in a week.

[ildar170975]

As for practical use of decluttering card - repeat, read docs in corr repo and ask in Community.
To many things to be explained: how to use it, how to register templates. Off topic here.

[th3jesta]

HA-LCARS author, here. I want to clarify that this is not an issue that exclusively affects HA-LCARS. For Thomas' sake, I want to make sure there is a clear delineation between HA-LCARS and card-mod; HA-LCARS uses card-mod in ways that Thomas probably never intended. It just so happens that Markdown cards are commonly used in HA-LCARS. But I did not use the HA-LCARS theme in the original example in this issue for the purpose of decoupling the issue from HA-LCARS. I would ask that further conversation around HA-LCARS be relegated to the HA-LCARS Discord. Note, however, name-calling will result in an immediate ban from the Discord server.

[th3jesta]

I would further request that if anyone has commented on this thread anything that does not have to do with the original issue or that is not a workaround appropriate or (truly) useful for non-HA-LCARS users, to please hide or delete comments. We're not helping our case to get this issue resolved.

[Mariusthvdb]

type: vertical-stack cards:

• type: markdown
  content: '# Kitchen'
  card_mod:
  class: header

I believe the whole idea if the decluttering card is to prevent the class (which you report as not working correctly) and replace that with a card_mod directly on the Markdown card itself.

so the decluttering template would use the card_mod, and any other repetitive yaml.

template and save it in de decluttering folder with a descriptive title, (for now I used 'markdown'):

 type: markdown
   content: [[[title]]]
   card_mod:
     style: |
       ha-card {
         background: green;
      }

and then use that in the frontend

type: custom:decluttering-card
template: markdown
variables:
  - title: My Markdown card

ofc, you need to expand on that, but this is to get you going.

I didnt check the LCARS at all, so have no idea whether this would be a useable workaround yet.

[neoKushan]

It's worth highlighting that this issue isn't specific to Markdown cards either, other card types will be affected by the issue as well (to varying degrees in my experience) - so any solution that involves using templates to inject the card-mod code will need templates creating for lots of other card types as well. Definitely doable if it fixes the issue, but it's going to be a lot of work.

[antimidas]

I don't think discussing a workaround to the issue currently present in this repo is offtopic, just because it uses a different addon - if it's a valid workaround, then it's fair game. I mean this topic was started because of the LCARS theme, so by the same extension it would be offtopic.. However, the reason people are asking for a tutoral/guide on your suggestion is because it's not clear how it solves the issue, either. I am familiar with the decluttering card, but I don't see how it helps card-mod not loading correctly.

With the LCARS theme, Markdown cards are used quite heavily to add what I guess you'd call "flair", lots of headers, dividers and footers, etc. so it's not unreasonable or unexpected for someone to have 100+ of them. Thus while your suggested workaround is a welcome one, it's not an "easy" fix.

The easiest workaround I've found is somewhat of a hammer to crack a nut, this automation:

alias: 0 - Reload Themes Every 10 seconds
description: Workaround for broken LCARS
trigger:
  - platform: time_pattern
    seconds: /10
condition: []
action:
  - action: frontend.reload_themes
    metadata: {}
    data: {}
mode: single

It calls reload_themes every 10 seconds so that even if the page doesn't load correctly, it'll fix itself within a few seconds. It's not the most efficient thing in the world, but it works for me.

Thank you for this. This was the one that will be enough for me—tried all the other suggestions with no consistent results. The "declutter" card did not work either.

[Mariusthvdb]

It's worth highlighting that this issue isn't specific to Markdown cards either, other card types will be affected by the issue as well (to varying degrees in my experience) - so any solution that involves using templates to inject the card-mod code will need templates creating for lots of other card types as well. Definitely doable if it fixes the issue, but it's going to be a lot of work.

none of my classes suffer the described issue, but, I admit to only use a few. having said that, things like these classes are functional as ever, just as the generic settings for the buttons-header-footer

    card-mod-card-yaml: |
      hui-buttons-header-footer $ hui-buttons-base:
        $ : |
          .ha-scrollbar {
            justify-content: space-evenly;
            height: 50px;
            align-content: center;
            margin: -8px 0px 0px 0px;
          }

      hui-buttons-header-footer $ hui-buttons-base $: |
          ha-assist-chip {
            border: 1px solid var(--primary-color);
            border-radius: var(--ha-card-border-radius);
            /*--ha-assist-chip-filled-container-color: yellow;*/
            --secondary-text-color: var(--primary-color);
            --primary-text-color: var(--primary-color);
            --_label-text-weight: bold;
          }
          ha-assist-chip state-badge {
            justify-content: space-between;
            margin-left: 4px;
          }

      .: |
        ha-card.class-header-icon .card-header .icon {
          padding-left: 0px;
          padding-right: 4px;
        }

        ha-card.class-header-margin-no-color .card-header {
          font-weight: 400;
          font-size: 20px;
          padding: 0px 12px;
          margin: 0px 0px 16px 0px;
        }

        ha-card.class-header-margin .card-header {
          background: var(--background-color-off);
          font-weight: 400;
          font-size: 20px;
          color: var(--text-color-off);
          padding: 0px 12px;
          margin: 0px 0px 16px 0px;
        }

        ha-card.class-header-no-margin-no-color .card-header {
          font-weight: 400;
          font-size: 20px;
          padding: 0px 12px;
        }

        ha-card.class-header-no-margin .card-header {
          background: var(--background-color-off);
          font-weight: 400;
          font-size: 20px;
          color: var(--text-color-off);
          padding: 0px 12px;
        }

        ha-card {
          transition: none !important;
          overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
          background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}};
        }

[Mariusthvdb]

this might be worth the experiment: what happens if you add this to the mod:

    card_mod:
      style: |
        ha-card.type-markdown {
          margin: -8px -16px;
          box-shadow: none;
        }

Markdown is one of the rare cards (next to a few incidental type picture-x cards) that requires this in the regular modding, because every now and then when I use it without, and the markdown is in a stack or entities, those margins get applied to the containing card and make the markdown go beyond the limits of the container...

setting it explicitly to the type-markdown prevents this.

[Swordnut]

this might be worth the experiment: what happens if you add this to the mod:

    card_mod:
      style: |
        ha-card.type-markdown {
          margin: -8px -16px;
          box-shadow: none;
        }

Markdown is one of the rare cards (next to a few incidental type picture-x cards) that requires this in the regular modding, because every now and then when I use it without, and the markdown is in a stack or entities, those margins get applied to the containing card and make the markdown go beyond the limits of the container...

setting it explicitly to the type-markdown prevents this.

Hi,
no change in behaviour. here is the context - a blank markdown card with class "footer"

content: '##  '
theme: LCARS Classic
card_mod:
 style: |
   ha-card.type-markdown {
     margin: -8px -16px;
     box-shadow: none;
   }
 class: footer

[nickshew]

I didn't see a simple example of the decluttering solution. It turned out to be quite easy and works well. Once you have installed it via HACS you can use this example code to get the card working. Search for 'Decluttering Card' in HACS and follow the install instructions.

In the dashboard raw configuration editor place a template in front of the existing code:

decluttering_templates:
markdown_template:
card:
type: markdown
title: '[[title]]'
content: '[[content]]'
card_mod:
class: '[[class]]'

Then replace the markdown card with the following (change variables as you need to)

type: custom:decluttering-card
template: markdown_template
variables:
- title: ''
- content: '# Environmental Lighting'
- class: header

I hope that is helpful for some.

[shnizmuffin]

@th3jesta the ha-card classes are getting replaced by the ResizeController which should probably

1. grab the existing classes
2. remove all of the components defined classes
3. add all the remaining classes and whatever new one they've defined.

[notwaldorf]

thanks @nickshew, that worked a treat!

[Mariusthvdb]

not sure that decluttering solution is so fail-safe as you hope it is. decluttering is known for its intricacies, especially in combination with card-mod, and passing on templates in particular.

If it works in your current usecase, please use it of course. Just be ware that in more complex (card-modded) configurations, you need to be very alert all settings are passed on to the final card.

I didn't see a simple example of the decluttering solution.

isn't that what I proposed here #392 (comment) ?

O well, use the workaround that works for you, in either case, if there is a true bug in card-mod, it needs to be fixed by Thomas, as he is the true magician here.
We can merely try and find temporary fixes ;-)

and be sure to load the resource via de Frontend:

frontend:
  extra_module_url:
# https://github.com/thomasloven/lovelace-card-mod?tab=readme-ov-file#performance-improvements
    - /hacsfiles/lovelace-card-mod/card-mod.js

cant hurt to repeat that once more