Dashboard editing in UI via browser acts "funny"

Configuration Frontend
1

I experience “funny” behaviour when editing my dashboards lately. I edit my cards in Edge browser, in UI and/or in code editor (depends on card). What i experience lately is - not refreshing - changing contents when i change card.

say, this card has horizontal stack of custom button cards:

image
image1121×1222 54.8 KB

  • i select first main card (white rectangle)
  • then i click on first sub-card (green rectangle) it shows me correct code.
  • when i click on second sub-card (red rectangle) also shows correct code.
  • then i change main card in first line - i select blue one - but code below remains from previous card - it doesn’t change. Only when i click green or red - only then i finally get correct contents.

Interesting is also this error: if i click on blue card (after i’ve had selected white) code doesn’t change to new contents. Only when i expand code with “{}” (orange) new (correct) code appears.
But here strange behaviour doesn’t end: when i shrink code again with {} then OLD code appears again (from white card)!!! Only when i click red or green again i get correct code.

Yeah, it’s complicated, but hope i managed to explain enough to understand.

I noticed this behaviour some month or two ago. Approximately ate that time i also changed my HA installation from single HAOS into proxmox VM on my Intel NUC skull canyon (i7 cpu). I doubt that this would be the reason, though, since my NUC has plenty of power (it runs at couple of %).

Anyone has a clue what could be the cause? Browser’s cache hard cleared, even edge set to default values… Or is that “normal” behaviour?

2

I can’t even get in to that position you have.
Here I have a graph and a horizontal stack but when I go to code mode I see all the code.
Not just the section code.

image
image1236×811 68.1 KB

But this might be because you have a custom card and I don’t.
But the above is also in Edge.

3

I wrote a simple example - sensors are imaginary, but effect is shown clearly:

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: sensor.test_1_1
        name: 1-1
      - type: custom:button-card
        entity: sensor.test_1_2
        name: 1-2
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: sensor.test_2_1
        name: 2-1
      - type: custom:button-card
        entity: sensor.test_2_2
        name: 2-2

Try this if you have custom button-card installed.

But sometimes even stranger thing happens… this happened when i clicked to “bottom 1”:

image
image710×724 23.2 KB

If you see where my cursor is - i can’t click on {} (it’s grey), so when this happens i can’t get nor to the code or UI… then i fiddle around, click here, click there…and after some clicks code appears again.

(now i’m beginning to wonder if it’s custom-button-card’s fault…)

EDIT: i tried chrome, but same happens.

4

I had no idea I had custom button card installed.

But this is what I see in Edge:

image
image1390×932 35.3 KB

But here I can recreate the first error you had:

image
image1350×898 33.5 KB

Here the yaml should say 2-1 as name.

1 Like
5

So you have the same problem, as i see…
I just tried HA’s built-in button card, but same happens, UI stays old when i change card. So, it seems it’s global problem.

6
1 Like
7

Thanks for this info! So this problem is known and it has been worked on. Hopefully a correction will come soon.

8

This has gone from bad to worse… version 2025.3 caused editing in UI is impossible. If i choose {} (code editor in UI) mouse focus goes out of editor window at first key input: when i enter first letter to correct something further typing is imposible, while if i press “e” i get entities choose window, which shows that mouse focus goes on the background (main dashboard).
Refresh, hard-refresh…doesn’t help. And it’s the same on multiple PC’s both on Edge and Chrome.

1 Like
9
1 Like