HA Update 2024.7.2 card_mod no longer seems to work properly #383

pille89 · 2024-07-11T11:24:23Z

My Home Assistant version: 2024.7.2

My lovelace configuration method (GUI or yaml):
both

What I am doing:
See yaml code and image

What I expected to happen:
see picture 1

What happened instead:
see picture 2

# The least amount of code possible to reproduce my error

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Wohnzimmer
        secondary: >-
          🌡️ {{ states('sensor.thermometer_wohnzimmer_temperature') }}ºC    💧
          {{ states('sensor.thermometer_wohnzimmer_humidity') }}%
        icon: mdi:sofa-outline
        entity: sensor.thermometer_wohnzimmer_temperature
        multiline_secondary: true
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        fill_container: true
        layout: horizontal
        card_mod:
          style: |
            :host([dark-mode]) {
              background: rgba(var(--rgb-primary-background-color), 0.2);
            } 
            :host {
              background: rgba(var(--rgb-primary-text-color), 0.025);
              --mush-icon-size: 76px;
              height: 60px;
              margin-left: -20px !important;
            }
            ha-card {
              border-width: 0px;
              box-shadow: 0px 0px;
            }        
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.thermometer_wohnzimmer_battery
            icon: |2-
               {% set level = states(entity) | int(0)%}
               {% if level >= 90 %}
               mdi:battery-90
              {% else %}
               {% set level = states(entity) | int(0)%}
               {% if level >= 80 %}
                mdi:battery-80
               {% elif level >= 70 %}
                mdi:battery-70
               {% elif level >= 60 %}
                mdi:battery-60
               {% elif level >= 50 %}
                mdi:battery-50
               {% elif level >= 40 %}
                mdi:battery-40
               {% elif level >= 30 %}
                mdi:battery-30
               {% elif level >= 20 %}
                mdi:battery-20
               {% elif level >= 10 %}
                mdi:battery-10
               {% else %}
                mdi:battery-sync-outline
               {% endif %}
              {% endif %}
            icon_color: |-
              {% set level = states(entity) | int(0) %}
              {% if level >= 16 %}
                green
              {% elif level >= 15 %}
                yellow
              {% else %}
                red
              {% endif %}
          - type: template
            entity: light.wohnzimmer
            icon: |-
              {% if is_state(entity, 'on') %}
              mdi:lightbulb-on-outline
              {% else %}
              mdi:lightbulb-off-outline
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            double_tap_action:
              action: none
          - type: template
            entity: input_boolean.schalter_wz_lichtautomatik
            icon: >-
              {% if is_state(entity, 'on')%}  mdi:lightbulb-auto  {% else %} 
              mdi:lightbulb-auto-outline  {%endif %}
            icon_color: >-
              {% if is_state(entity, 'on')%}  green  {% else %}  red  {% endif
              %}
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: template
            entity: cover.rollos_wohnzimmer
            icon: |-
              {% if is_state(entity, 'open') %}
              mdi:window-shutter-open
              {% else %}
              mdi:window-shutter
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: call-service
              service: browser_mod.popup
              target:
                device_id:
                  - 2b05e0fe48bf4
                  - a31f93115626a
              data:
                dismissable: true
                autoclose: false
                content:
                  type: vertical-stack
                  cards:
                    - features:
                        - type: cover-open-close
                      type: tile
                      entity: cover.rollo_wohnzimmerfenster
                      name: Wohnzimmerfenster
                      show_entity_picture: false
                      hide_state: false
                      vertical: true
                    - features:
                        - type: cover-open-close
                      type: tile
                      entity: cover.rollo_wohnzimmer_tur_links
                      name: Wohnzimmertür links
                      show_entity_picture: false
                      hide_state: false
                      vertical: true
                    - features:
                        - type: cover-open-close
                      type: tile
                      entity: cover.rollo_wohnzimmer_tur_rechts
                      name: Wohnzimmertür rechts
                      show_entity_picture: false
                      hide_state: false
                      vertical: true
                timeout: 60000
                title: Rollos Wohnzimmer
            hold_action:
              action: more-info
            double_tap_action:
              action: none
          - type: template
            entity: remote.wohnzimmer
            icon: |-
              {% if is_state(entity, 'on') %}
              mdi:television-classic
              {% else %}
              mdi:television-classic-off
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            double_tap_action:
              action: none
          - type: template
            entity: sensor.ps5_679_activity
            icon: |-
              {% if is_state(entity, 'on') %}
              fab:playstation
              {% else %}
              fab:playstation
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            double_tap_action:
              action: none
        alignment: left
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0px;
              --chip-box-shadow: none;
              --chip-background: none;
              padding: 0px 10px 0px 0px;
            } 
    card_mod:
      style: |
        ha-card {
          height: 102px;
          border-width: 0px;
          box-shadow: 0px 0px;
        }
card_mod:
  style: |
    ha-card { 
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    }


# End of code

picture 1:

picture 2:

Image 1 is before the update to HA 2024.7.2 and image 2 is after the update

pitiriguisvi · 2024-07-13T07:46:48Z

same here

hesspoint · 2024-07-16T19:50:11Z

same issue.

I use stack-in-card to show a mushroom template card and then below a mushroom chip card row, same as the submitter.

They used to look like this

Since either the latest HA update to 2024.7.x They now look like this

Somehow the alignment is messed up and also the bar with the chips card is no longer showing

ParalaX002 · 2024-07-18T15:33:15Z

Hi, I can confirm the issue with the same kind of code and mushroom cards.

mx-vatte · 2024-07-19T10:29:45Z

I can also confirm that the position is off towards the bottom and there is no reaction regarding any alignment inputs since update to 2024.7.2.

hesspoint · 2024-07-25T19:01:12Z

This issue is open since 2 weeks. It would be nice if this could be fixed sometime as everyones dashboard is messed up due to this bug :(

Maxcodesthings · 2024-07-28T18:10:44Z

Piling on here. Even simple card-mod settings just dont work:

 - type: custom:bar-card
        icon: mdi:white-balance-sunny
        min: 0
        max: 8
        positions:
          name: 'off'
          icon: inside
        severity:
          - color: '#F9E400'
            from: 0
            to: 10
        card-mod:
          style: |
            ha-card {
              border: 1px solid red;
            }
        entities:
          - entity: sensor.my_home_solar_power

And no red border:

Kai-Wulf · 2024-08-03T02:26:59Z

Seeing the same non-working behaviour in 2024.7.3

Tried just a simple button card, with a simple style change. No difference

Card-Mod installed via HACS

Tested with and without frontend settings in config yaml:
extra_module_url:
- /www/community/lovelace-card-mod/card-mod.js

Mariusthvdb · 2024-08-07T20:36:16Z

please close this issue, card-mod is not broken at all.

All of the above is either user error on the used method (why use card-mod when button-card has its own css options) or caused by other custom-cards configurations combinations.

Card-mod might not be completely doing in Sections what some hope it would, but that has more to do with the experimental state the Sections view is still in.

otoh, many things are possible, if users would make a true effort to walk the Dom, and find the correct property to mod.

Also, when asked for a minimal config, how would fit #383 (comment) into that category, and how could poster expect the repo owner to even start having a look....

anyways, 2024.8 is out, and card-mod is doing all it should do, as it hasn't stopped doing......

ildar170975 · 2024-08-07T20:40:31Z

I am afraid most of recently raised issues should be closed due to:
-- more than a possible influence of custom cards
-- users' errors

ParalaX002 · 2024-08-09T18:02:04Z

Ok, so for me:

Everything was working quiet well with home assistant 2024.6
Then all the CSS broke with just updating to 2024.7
Hence, thinking that there was an issue with card-mod and the new home assistant.

After more investigation, it seems that using the :host has some stuff that changed, but it's still necessary at some point. So what I did is play a bit with all the CSS modification, to get it working.
Hence, card mod doesn't seems at fault, but the code we use which produce the kind of stuff pille89 is using (that I use too) seems to have changed.

hesspoint · 2024-08-10T16:22:23Z

@ParalaX002

Ok got it. I also use that card mod CSS. Since it seems you got it working again, could you share your modifications so that we can also try it out?

Thanks a lot!

Mariusthvdb · 2024-08-10T20:06:27Z

Then all the CSS broke with just updating to 2024.7

this is just plain nonsense, why do you say that. Could be that 1 or 2 mods you use on a tile card now need adaptation.

stating all CSS broke has no foundation at all.
again, this non-Issue needs to be closed, and support questions should go to the community.

As long as you dont do that, you wont get help, because this is not the place for that

ParalaX002 · 2024-08-10T20:43:31Z

Don’t take it so on yourself. With the context, it was clear that in my configuration, all the transformation made didn’t work anymore. I’m not a css expert, so when everything is suddenly out of place, this is how it feels. I then explained why, and that it seems to be with the modification we make, which seems to come from the same kind of template with chips on the top and bottom of the card. I also ruled out the card mod here.

ill post here my new code but I’m away of the computer at the moment.

ParalaX002 · 2024-08-11T07:39:46Z

Hi,

So here is the code of my cards:


type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: spacer
      - type: template
        content_info: none
        tap_action:
          action: navigate
          navigation_path: cave-batteries
        icon: >
          {% if [states('sensor.cave_battery') | float] | select('lt', 10) |
          list | count > 0 %} mdi:battery-20 {% elif
          [states('sensor.cave_battery') | float] | select('lt', 20) | list |
          count > 0 %} mdi:battery-50   {% else %} mdi:battery {% endif %}
        icon_color: >
          {% if [states('sensor.cave_battery') | float] | select('lt', 10) |
          list | count > 0 %} red  {% elif [states('sensor.cave_battery') |
          float] | select('lt', 20) | list | count > 0 %} orange {% else %} grey
          {% endif %}
    alignment: end
    card_mod:
      style:
        .: |
          ha-card {
            --chip-spacing: 0;
            --chip-border-width: 0;
            --chip-background: none;
            margin-right: 6px;
            height: 25px;
          }
  - type: custom:mushroom-template-card
    primary: Cave
    tap_action:
      action: navigate
      navigation_path: cave
    secondary: >
      {{ states("sensor.cave_temperature") | round(1, default=0) }}°C | {{
      states("sensor.cave_humidity") | round(1) }}% | {{
      (states("sensor.prise_boiler_power") | float | round(1) ) | round(1) }}Wh
    icon: mdi:home-floor-negative-1
    icon_color: blue
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          --chip-spacing: 0;
          --chip-border-width: 0;
          --chip-background: none;
          --ha-card-border-width: 0;
          margin-left: -25px;
          margin-top: -55px;
        }
        :host
        {
          --mush-icon-size: 72px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.prise_boiler
        content_info: none
        tap_action:
          action: more-info
        icon: mdi:water-boiler
        icon_color: |
          {% if is_state('switch.prise_boiler', 'on') %}
            blue
          {% else %}
            grey
          {% endif %}
      - type: spacer
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-spacing: 0;
          --chip-border-width: 0;
          --chip-background: none;
          margin-right: 6px;
          margin-top: -25px;
        }
card_mod:
  style: |
    ha-card {
      background: rgba(25, 25, 25, 0.1);
    }

Which gives this:

This is a simple ones, but it follows the card the author showed at first. I removed a lot of unused CSS that I had, and the margins are a lot of different. There was also some fideling with the ":host" and "ha-card". Not sure what it relates to, but it had an impact. I hope this can help.

Mariusthvdb · 2024-08-11T14:57:38Z

I also ruled out the card mod here.

And yet you keep breaking all Github/Home Assistant conventions, and again post in the card-mod repo....

hesspoint · 2024-08-11T21:52:06Z

I also ruled out the card mod here.

And yet you keep breaking all Github/Home Assistant conventions, and again post in the card-mod repo....

Can we please focus on solving the problem instead of being pedantic about whatever rules? Sorry but either please contribute to a solution or let others do this. These comments are not helping anyone.

ildar170975 · 2024-08-11T22:24:42Z

This is not about shutting you down - this is about

not opening an issue considering it as a bug - which is a “wrong use by a user” instead
moving a discussion to a proper place - Community.

Mariusthvdb · 2024-08-12T05:39:53Z

These comments Are helping a lot of people.

It is a fundamental principle to the entire community in GitHub and Homeassistant to post in the correct place, to help other users find it and contribute.

being as stubborn as above in fact doesn’t help anyone, and it is only because there is no moderation here this issue is not closed down yet.

You would have already found your answer in the community

hesspoint · 2024-09-09T20:44:41Z

FYI I have played around with the cards that did not show as they used to.

In fact I asked chatGTP for advice and voila it suggested to add one line

display: flex;

here is the modified code

card_mod: style: | :host([dark-mode]) { background: rgba(var(--rgb-primary-background-color), 0.2); } :host { background: rgba(var(--rgb-primary-text-color), 0.025); --mush-icon-size: 76px; height: 63px; margin-left: -21px !important; display: flex; }

That line of code restored to how it was. Anyone who also had that issue try adding this.

Maxcodesthings mentioned this issue Aug 7, 2024

Card mod not working in new section view? #389

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HA Update 2024.7.2 card_mod no longer seems to work properly #383

HA Update 2024.7.2 card_mod no longer seems to work properly #383

pille89 commented Jul 11, 2024

pitiriguisvi commented Jul 13, 2024

hesspoint commented Jul 16, 2024

ParalaX002 commented Jul 18, 2024

mx-vatte commented Jul 19, 2024

hesspoint commented Jul 25, 2024

Maxcodesthings commented Jul 28, 2024

Kai-Wulf commented Aug 3, 2024

Mariusthvdb commented Aug 7, 2024 •

edited

Loading

ildar170975 commented Aug 7, 2024

ParalaX002 commented Aug 9, 2024

hesspoint commented Aug 10, 2024

Mariusthvdb commented Aug 10, 2024 •

edited

Loading

ParalaX002 commented Aug 10, 2024

ParalaX002 commented Aug 11, 2024 •

edited

Loading

Mariusthvdb commented Aug 11, 2024

hesspoint commented Aug 11, 2024

ildar170975 commented Aug 11, 2024 •

edited

Loading

Mariusthvdb commented Aug 12, 2024

hesspoint commented Sep 9, 2024

HA Update 2024.7.2 card_mod no longer seems to work properly #383

HA Update 2024.7.2 card_mod no longer seems to work properly #383

Comments

pille89 commented Jul 11, 2024

pitiriguisvi commented Jul 13, 2024

hesspoint commented Jul 16, 2024

ParalaX002 commented Jul 18, 2024

mx-vatte commented Jul 19, 2024

hesspoint commented Jul 25, 2024

Maxcodesthings commented Jul 28, 2024

Kai-Wulf commented Aug 3, 2024

Mariusthvdb commented Aug 7, 2024 • edited Loading

ildar170975 commented Aug 7, 2024

ParalaX002 commented Aug 9, 2024

hesspoint commented Aug 10, 2024

Mariusthvdb commented Aug 10, 2024 • edited Loading

ParalaX002 commented Aug 10, 2024

ParalaX002 commented Aug 11, 2024 • edited Loading

Mariusthvdb commented Aug 11, 2024

hesspoint commented Aug 11, 2024

ildar170975 commented Aug 11, 2024 • edited Loading

Mariusthvdb commented Aug 12, 2024

hesspoint commented Sep 9, 2024

Mariusthvdb commented Aug 7, 2024 •

edited

Loading

Mariusthvdb commented Aug 10, 2024 •

edited

Loading

ParalaX002 commented Aug 11, 2024 •

edited

Loading

ildar170975 commented Aug 11, 2024 •

edited

Loading