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.

https://github.com/user-attachments/assets/9846a767-ccca-4898-9c05-e5df2993b58e

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:

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

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

https://github.com/user-attachments/assets/68af9b4d-e712-4f1e-adeb-77581647fc72

[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”.

[antimidas]

Good luck with your project and being an asshole Sent from my iPhone

On Aug 29, 2024, at 3:39 PM, ildar170975 @.***> wrote:



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

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

— Reply to this email directly, view it on GitHubhttps://github.com/thomasloven/lovelace-card-mod/issues/392#issuecomment-2318759600, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA3MC34UKC2XY2N5R7VBUX3ZT52GFAVCNFSM6AAAAABMG7ORE6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJYG42TSNRQGA. You are receiving this because you commented.Message ID: @.***>

[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!

[ildar170975]

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.

[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, or unsubscribe. 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).

[antimidas]

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

On Sep 8, 2024, at 3:18 PM, ildar170975 @.***> wrote:



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

— Reply to this email directly, view it on GitHubhttps://github.com/thomasloven/lovelace-card-mod/issues/392#issuecomment-2336794954, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA3MC347KXDNT5THQ2CGXF3ZVSPJRAVCNFSM6AAAAABMG7ORE6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZWG44TIOJVGQ. You are receiving this because you were mentioned.Message ID: @.***>

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

[antimidas]

I’m not the one with an attitude here. Obviously there is more than just me with an issue. Yet here you are playing the expert and just acting like everyone is ignorant.

Why don’t YOU stop being an entitled prick. I also never asked you for help. I’ve mostly been quiet. YOU are the one talking down to people. Grow up kid. Hopefully you’re not full grown, and just don’t understand how adults communicate. Sent from my iPhone

On Sep 9, 2024, at 7:13 AM, Marius @.***> wrote:



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.

in other words: tone down the attitude, give it some effort, 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).

— Reply to this email directly, view it on GitHubhttps://github.com/thomasloven/lovelace-card-mod/issues/392#issuecomment-2337828328, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA3MC33C52RW6Y6FF6P2GS3ZVV7FLAVCNFSM6AAAAABMG7ORE6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZXHAZDQMZSHA. You are receiving this because you were mentioned.Message ID: @.***>

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

[antimidas]

Then don’t act like one. You act like you have some golden fix. If so share it. If not, fuck off with your attitude. Easy as that really.

I have several repos where I interact with users quite a lot. I NEVER need to be an asshole and act like everyone else is stupid. Maybe you should work on that.

As caught up as you are on being called an asshole, maybe it’s ringing true? Sent from my iPhone

On Sep 9, 2024, at 7:07 AM, ildar170975 @.***> wrote:



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.

— Reply to this email directly, view it on GitHubhttps://github.com/thomasloven/lovelace-card-mod/issues/392#issuecomment-2337816780, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA3MC35PJJ5MU3NEXOYWYO3ZVV6OXAVCNFSM6AAAAABMG7ORE6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZXHAYTMNZYGA. You are receiving this because you were mentioned.Message ID: @.***>

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