I'm going slightly mad at a popup not popping up

I have the very same page and widget code on two machines both running 3.4.1.
On one of them it is working like it’s supposed to, creates a popup for the “wr” page when clicked upon.
On the other box, it just doesn’t work. Using the same browser so should not be because of client settings like popup blocker.
There’s clicking problems in different widgets on the page so I believe it ain’t related to the widget but to be frank I have no clue.
Does anyone have an idea what to look for or how to get any useful error message out ?

The click code in the widget is

                      - component: oh-icon
                        config:
                          height: 60
                          icon: iconify:icon-park-outline:electric-wave
                      - component: oh-icon
                        config:
                          action: popup
                          actionModal: page:wr
                          height: 60
                          icon: clickable
                          style:
                            margin-top: -60px

That is weird… Here are the first things I would try:

The OH action popups are not pre-rendered so you can see the changes in the page html in the browser inspection pane when you activate one.

Without popup:
image

With popup:
image

Looking for that will at least tell you if the popup is failing to open or opening somewhere off screen.

Also a log of the modal opening shows up in the browser console as would any UI errors halting that process (I assume):
image

If it’s not the popup itself, then the clicking issues may just be related to some other component in the page being mis-rendered and overlapping the icon for the popup. To check that, again my first test would be in the browser inspector. In chrome the shortcut is ctrl + shft + c and that lets you select any element in the page if you click on it, but if you just move it around and hover it’ll highlight the element underneath the pointer and that might show you if some other element is above the icon.

Yes it’s weird. Thanks for your pointer input.
Unfortunately I never messed with F7, CSS or browser inspector in detail so I’m mostly lost here and unsure to get it right, but the first finding of my comparison is that there are 13 occurences of code to contain popup elements in the good case vs just 6 in the bad case.
I think I have 6 clickable icons on the page that should result in a window pop up.
So there are two occurences of popup code to contain popup elements in the “good” case and just one in the “bad” case.

Bad:

Good:


and

Plus there’s one difference on main level :
Bad:

The good one meanwhile:

PS: the different main pages are due to a modified openhab distro that show a different upper left logo (“theme-filled” probably there because of this) … but it’s the unmodified box that doesn’t work so I wouldn’t think that’s a reason. It’s just it makes code comparisons a lot harder.

That’s definitely indicative of the problem. The popup-backdrop div element should be there even if no popups are open yet. The fact that it’s not there on the bad page is the reason that you’re not seeing popups, I would guess.

The bad news is that I have no idea whether that is a cause of the problem or a symptom of the problem.

What happens if, instead of an action on the oh-icon you put the icon in an oh-link with the action? Something like this:

    - component: oh-link
      config:
        action: popup
        actionModal: page:wr
      slots:
        default:
          - component: oh-icon
            config:
              height: 60
              icon: clickable

Great, some progress indeed. I now can click that one to get a popup.
Clicking on the icon does not work though, the area I have to click is the same size, but located right above the icon.
Maybe the two oh-icon elements are hiding each other in some way?
BTW no popup on the other clickable icons

current state:

                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 60
                          icon: iconify:icon-park-outline:electric-wave
                      - component: oh-icon
                        config:
                          action: popup
                          actionModal: page:wr
                          height: 60
                          icon: clickable
                          style:
                            margin-top: -60px

OK, it must have something to do with setting the margin-top to -60px. I think you’re definitely getting some issue where the elements are not overlapping the way you expect.

Instead of using the margin to move the element, what happens if you use something like

style:
  position: relative
  top: -60px

Yes that moved the clickable area down onto the icon but it was only half the icon’s height so I experimented with scale: 2 and adjusted top: to -40px now the clickable area covers the icon.
Likewise did for the other clickable icons. I didn’t create the original widget, never took my time to dive enough into this and now I’m totally confused by this stuff and don’t understand what I’m doing there, but it’s apparently working now.
So a big thank you for your help !