Mod styling not applied when loading/initializing the dashboard

[coolbombom]

My Home Assistant version: 2023.10.4

My lovelace configuration method (GUI or yaml): yaml

What I am doing: setting width of a card

What I expected to happen: card width to be fixed and shown in that width

What happened instead: styling is not applied to mushroom-light-card until window is resized and hit a width threshold.

In other words, the styling is not applied when loading/initializing the dashboard, but resizing the browser window resulting in hitting a media query (i think), causes the styling to be added. I can see that the CSS styling it is not applied, by investigating the elements using Firefox.

Example:

type: custom:mod-card
style:
  .: |
    ha-card {
      border-width:0px;
    }
  hui-horizontal-stack-card$: |
    #root {
       display: unset !important;
    }
    mushroom-light-card {
       width: 167px !important;
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-light-card
      entity: light.sofa
      layout: vertical
      hide_state: false
      use_light_color: false
      show_brightness_control: true
      show_color_temp_control: false
      show_color_control: false
      collapsible_controls: true
      hold_action:
        action: more-info
      fill_container: false
      icon: mdi:lightbulb
      name: Sofa
    - type: custom:mushroom-light-card
      entity: light.other
      layout: vertical
      use_light_color: false
      hold_action:
        action: more-info
      show_brightness_control: true
      collapsible_controls: true
      show_color_control: false
      show_color_temp_control: false
      hide_state: false
      fill_container: false
    - type: custom:mushroom-light-card
      entity: light.dimmable_light_1_3
      layout: vertical
      hide_state: false
      use_light_color: false
      show_brightness_control: true
      show_color_temp_control: false
      show_color_control: false
      collapsible_controls: true
      hold_action:
        action: more-info
      fill_container: false

---

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.

[coolbombom]

Follow up:

I do not see this behavior in the mobile app, here the width is set correct. It only occurs using a browser, and tried using a browser on mobile, tablet and pc, it happens on all of them.

[ildar170975]

May be you should check it with a conventional card instead of mushroom?

[krabsheva]

Ran into this myself. I had installed card-mod only vi the "extra_module_url" configuration (not as a dashboard resource). Opening HA as a Chrome app on Windows, the card-mod.js file would not load at first (and thus none of the style changes it allows). It would, however, load properly after subsequent reloads of the page (via Ctrl+R).

I seem to have worked around the problem by loading card-mod.js as a dashboard resource as well.

So now, on initial loading of the HA Chrome app, I see the "You may not be getting optimal performance..." console message, but I do not see it after Ctrl+R reloads and the disable cache option checked. So this seems to confirm that card-mod.js is sometimes not loading via the "extra_module_url" configuration.

Dunno if this is a problem with HA, this addon, or Chrome not firing some event properly on startup. Hoping to provide a workaround or insight if unable to reproduce the problem.

[ildar170975]

@Siroguh

  xxx
    $:
      .: |
        xxx { ... }

I cannot find proper words to name it. In short - this is absolutely useless. This is same as

  xxx
    $: |
      xxx { ... }

[ildar170975]

Starting from the 3rd sentence in you answer I got lost in what you are saying, but no problem.

[Siroguh]

@ildar170975 in short - i told you to f off with that answer you gave to me.

"  cannot find proper words to name it. In short - this is absolutely useless.

"

[ildar170975]

in short - i told you to f off with that answer you gave to me.

@Siroguh Well done))) keep on

[Siroguh]

No problem, i'll just delete my useless answers that I know to be working so that you can help them with the useful way.

[Siroguh]

No problem, i'll just delete my useless answers that I know to be working so that you can help them with the useful way.

@ildar170975

[ildar170975]

@Siroguh

i'll just delete my useless answers that I know to be working so that you can help them with the useful way.

This is a too horrible punishment for people here...

[Siroguh]

@ildar170975

1) I'd rather not contribute with wrong answers than contribute. Clearly the solution I provided doesn´t add anything so i´ll just let other answer with the correct one. 2) I´d rather not contribute to a repo where leaving a casual "Your answer is absolutely useless" message is accepted.

[ildar170975]

@Siroguh

"Your answer is absolutely useless"

Read my comments again then. You are exaggerating. Cool down. I gonna stop at this point.