unwanted `class="undefined"` added => layout changed (without any styles applied)

[SVNKoch]

My Home Assistant version: core-2024.9.2

My lovelace configuration method (GUI or yaml): GUI What I am doing: Recoloring buttons, but it happens even without applying any style and just using card-mod What I expected to happen: nothing What happened instead: layout changes due to added class="undefined" Minimal steps to reproduce: before:

type: entities
entities:
  - entity: script.my_script
    name: Script
    icon: mdi:script-text
  - entity: lock.my_lock
    name: Lock
  - entity: button.my_button
    name: Button
    icon: mdi:button-pointer

=> (on images buttons highlighted by holding clicking on them, photoedited composed multiple to highlight all buttons)

afterwards:

type: entities
entities:
  - entity: script.my_script
    name: Script
    icon: mdi:script-text
    card_mod:
      style:
        hui-generic-entity-row:
  - entity: lock.my_lock
    name: Lock
    card_mod:
      style:
        hui-generic-entity-row:
  - entity: button.my_button
    name: Button
    icon: mdi:button-pointer
    card_mod:
      style:
        hui-generic-entity-row:

=>

As we can see now the buttons are not right aligned anymore in the row. The RUN and PRESS button have moved left by roughly 1 space ( ) to the left I would say.

I verified that the only thing that changed in the html code is the mentioned undefined class.

html code for comparing before formatting received via:

```javascript function extractHTML(node) { if (!node) return ''; if (node.nodeType === 3) return node.textContent.trim(); if (node.nodeType !== 1) return ''; let html = ''; let outer = node.cloneNode(); if (node.shadowRoot) { html += ''; // Add a comment for open shadow root node = node.shadowRoot; } else { node = node; } if (node.children.length || node.childNodes.length) { for (let n of node.childNodes) { if (n.nodeName === 'SLOT') { let assignedNodes = n.assignedNodes(); if (assignedNodes.length > 0) { for (let assignedNode of assignedNodes) { html += extractHTML(assignedNode); } } else { html += n.outerHTML; } } else { html += extractHTML(n); } } } else { html = node.innerHTML; } outer.innerHTML = html; return outer.outerHTML; } ```

Error messages from the browser console:

---

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.

[ildar170975]

Do you know that

    card_mod:
      style:
        hui-generic-entity-row:

is a wrong code which may cause unexpected results ?)

[SVNKoch]

@ildar170975 are you referring to the fact that there are no styles specified beneath? If yes: the problem persists when providing some, I just reduced the code to the minimal problematic code.

example style

```yaml type: entities entities: - entity: script.my_script name: Script icon: mdi:script-text card_mod: style: hui-generic-entity-row: mwc-button $: | .mdc-button { padding-right: 16px !important; color: green !important; --mdc-ripple-color: green !important; } ```

if no: how should above snippet look like instead? I have oriented myself at eg. this posting

[ildar170975]

I have oriented myself at eg. this posting

This is my post, it is about font-size in another card. I do not think that you meant this particular post.

padding-right: 16px !important;

We should not compare a row w/o card-mod and a row with this changed padding - they can be displayed differently.

reduced the code to the minimal problematic code.

The MWE (minimal working code) should be valid anyway. The posted code

    card_mod:
      style:
        hui-generic-entity-row:

is absolutely wrong and may cause unexpected results...

---

My test:

type: entities
entities:
  - entity: script.test_script
    name: Script
    icon: mdi:script-text
    card_mod:
      style: |
        hui-generic-entity-row {
          color: red;
        }
  - entity: lock.virtual_front_door_lock
    name: Lock
    card_mod:
      style: |
        hui-generic-entity-row {
          color: red;
        }
  - entity: input_button.testing_button
    name: Button
    icon: mdi:button-pointer
    card_mod:
      style: |
        hui-generic-entity-row {
          color: red;
        }

W/o card-mod:

With card-mod:

Photoshoped with "ripple" shown:

Seems to be same, no shifting.

---

Next test - with shadow Root:

type: entities
entities:
  - entity: script.test_script
    name: Script
    icon: mdi:script-text
    card_mod:
      style:
        hui-generic-entity-row mwc-button $: |
          .mdc-button {
            color: red !important;
            --mdc-ripple-color: green !important;
          }
  - entity: lock.virtual_front_door_lock
    name: Lock
    card_mod:
      style:
        hui-generic-entity-row mwc-button $: |
          .mdc-button {
            color: red !important;
            --mdc-ripple-color: green !important;
          }
  - entity: input_button.testing_button
    name: Button
    icon: mdi:button-pointer
    card_mod:
      style:
        hui-generic-entity-row mwc-button $: |
          .mdc-button {
            color: red !important;
            --mdc-ripple-color: green !important;
          }

which shows and after photoshoping: No shifting again.

But - using unneeded "ENTER" here will cause a shift & ".undefined":

Let's say like Apple: "don't hold it that way".

[SVNKoch]

oh well. Guess I was holding it wrong then. Man, I even tried multiple combinations of line breaks etc but apparently not that one 🙄 So yes, ofc this works on my machine too..

Thank you SO MUCH for your helpful posts on the forum and here!

Lets be hopeful, maybe this post will help someone else in the future. I wasn't able to find anything about this undefined class, here nor in the forum.