Question from a rookie custom card developer, styling doesn't work for my card.

[aukedejong]

Hi, I'm working on a custom card. One of the testers of the card discovered that card_mod styling doesn't work. I could reproduce the problem, but did not find a solution yet.

For some reason the class defined in the yaml, isn't applied to the ha-card element of my custom card. It works for other cards. The styling is working in de Card config panel, when you configure and add the card to the dashboard. On the dashboard the styling is gone.

Added yaml:

card_mod:
  class: top-level-card

Custom card: https://github.com/aukedejong/lovelace-windrose-card

https://community.home-assistant.io/t/lovelace-windrose-card/523319/20 Tom_I found the problem and posted some details.

Did I make a rookie mistake? I'm hoping you can point me in the right direction.

Thanks.

[ildar170975]

Where is the card itself?

[aukedejong]

This is the repo

https://github.com/aukedejong/lovelace-windrose-card

Editted the post, forgot to add a link display text.

Thanks

[aukedejong]

Finally found the problem. The setConfig method in the card caused the problems.

It needs to set the config property. I use an other property name and wrapped the config.

Not working:

    setConfig(config: any): void {
        this.cardConfig = new CardConfigWrapper(config);
    }

Working:

    setConfig(config: any): void {
        this.config = config;
        this.cardConfig = new CardConfigWrapper(config);
    }

I don't understand why this has impact on card_mod.

[thybag]

Cheers for figuring this out @aukedejong, have been scratching my head at the same issue for ages.