Popup does not show content

[membero]

In version 0.2.1 you integrated "popup card". Since this version, I cannot see any content in the popup. When I start a call, the transparent grey overlay is shown, but no other content, even no buttons to cancel/end the call. The call itself is established. If the other side hangs up, the grey overlay disappears.

This happens in every browser (tried FF and Chrome) and in the iPhone companion.

I just see three warnings in the debug console, but they appear directly and before I click to make a call:

reactive-element.js:38 Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.

reactive-element.js:38 Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.

index.js:10 The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information.

After the click to start a call, no warning or errors are logged in the debug console.

In lovelace, I have stacked some card so this is my sipjs-card code:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      [..]
  - type: horizontal-stack
    cards:
      - type: custom:sipjs-card
        server: xxx
        port: '8089'
        autoAnswer: false
        video: false
        ringtone: /local/asterisk/ringtone.mp3
        ringbacktone: /local/asterisk/backtone.mp3
        custom:
          - name: Haustüre
            number: 'xxx'
            icon: mdi:door
        extensions:
          - person: person.xxx
            name: xxx
            extension: '100'
            secret: xxx
            icon: mdi:account
        state_color: true
        custom_title: ''
        button_size: ''
        hide_me: true
      [...]

I use your asterisk addon as PBX. Before v0.2.1 of sipjs-card I used also your asterisk integration. But I removed it because it contained an old version of sipjs-card.js. Today I installed the integration again as you removed the js file. But the problem with the popup still exists.

Do you have any idea how to debug or solve this?

[TECH7Fox]

My guess is because you use it inside a stack. Did you try it without a stack? That should be fixed then, probably just a CSS bug.

The lit warnings are being worked on right now, #45, but they are unrelated.

[membero]

Hi,

I have now removed the card from the stack, the problem still exists. But I have created a new "Board" (I do not know how this is called in HA) with no other cards. And this time the popup shows up. It is called "theme" in lovelace raw mode:

  - theme: Backend-selected
    title: Test
    path: test
    badges: []
    cards:
      - type: custom:sipjs-card
        server: xxx
        port: '8089'
        autoAnswer: false
        video: false
        ringtone: /local/asterisk/ringtone.mp3
        ringbacktone: /local/asterisk/backtone.mp3
        custom:
          - name: Haustüre
            number: 'xxx'
            icon: mdi:door
        extensions:
          - person: person.xxx
            name: xxx
            extension: 'xxx'
            secret: xxx
            icon: mdi:account
        state_color: true
        custom_title: ''
        button_size: ''
        hide_me: true

For better understanding, here a screenshot from lovelace:

So it seems that another card is "blocking" the popup. When I add some "stacked" card to the "new" board, then I see that the popup opens, but somewhere in the middle and i cannot scroll down.

Perhaps this is the same problem I have on my "Home Board", but the popup is much more down and so I cannot see anything but the transparent grey overlay.

So I think it could have something to do with the stacked cards.

[TECH7Fox]

Wow, weird... Alright will try to fix it. Thanks!

[membero]

Very weird ineed. I made some more tries. It seems that my block "Heizung" is the problem. I can reproduce it. It seems to happen if I use a stacked stack which is not (fully) visible so that you have to scroll down to view it.

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: |-
              line
              line
[...] many lines more [...]
              line
              line
          - type: markdown
            content: 1b
      - type: vertical-stack
        cards:
          - type: markdown
            content: 2a
          - type: markdown
            content: 2b
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: 3a
          - type: markdown
            content: 3b
      - type: vertical-stack
        cards:
          - type: markdown
            content: 4a
          - type: markdown
            content: 4b

In the first markdown box I wrote many lines so that it is too long for not scrolling.

I have attached a yml config for a lovelace dashboard only with sipjs-card and markdown cards to reproduce it. With my monitors the stacked stack is not shown, I have to scroll down to see it. When I then click on "call", the popup does not start on top.

dashboard.yml.txt

[TECH7Fox]

I recreated it. Will try to fix it using the camera dialog as reference. Thanks for your help! :)

[TECH7Fox]

Found the issue. The normal dialogs go in the ha-more-info-dialog element which is outside the lovelace view. I tried to fix it by using absolute, but it seems to stop me from doing that. :(

Best would be to include it like the normal dialogs like this but that's only for domains/entities, and also not possible for custom cards.

Will keep this open, but can't fix it right now.

[membero]

Could this be a bug in lovelace itself? It seems unlikely that a dialog may open outside of the view. Perhaps I can open an issue with lovelace.

[TECH7Fox]

No, it's supposed to do that. That way it is above everything else, including the sidebar.

But that does mean that I can't access it directly sadly. Maybe this will change in the future, so will keep this open.