Issue with using PopUp inside picture-elements

[Menelao147]

Hi, I’m opening this topic following a discussion on the Home Assistant community forum.
I’m encountering an issue when using the Bubble Card pop-up feature inside a picture-elements card. The pop-up card needs to be placed inside a vertical-stack, but vertical-stack cannot be used directly within picture-elements. Some users suggest using custom:hui-element, but when I try to add the pop-up inside the hui-element, it seems that Bubble Card stops working.

Steps to reproduce the issue:

1. With vertical-stack, the pop-up works as expected.
   

2. Using custom:hui-element, Bubble Card also works as expected:
   

3. However, adding the pop-up inside hui-element breaks the configuration:
   

Goal
I would like to use the Bubble Card pop-up inside a picture-elements card with custom:hui-element as shown below:

type: picture-elements
image: /local/Floorplan/Sera.webp
elements:
  - type: custom:mushroom-entity-card
    style:
      left: 60%
      top: 70%
    entity: sensor.wall_connector_assorbimento_kw
    tap_action:
      action: navigate
      navigation_path: "#Test"
    hold_action:
      action: navigate
      navigation_path: "#Test"
    double_tap_action:
      action: navigate
      navigation_path: "#Test"
    icon: tsl:water-percent-absolute
    icon_color: disabled
  - type: custom:hui-element
    card_type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: pop-up
        hash: "#Test"
        button_type: name
        name: TEST1
        icon: mdi:air-conditioner
        scrolling_effect: true
        show_icon: true
        show_name: true
      - type: entities
        entities:
          - light.cottura
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: sensor.tesla_battery_level
        card_layout: large

Actual behavior:
When I click the pop-up, the screen becomes blurred, but nothing is shown in the popup.
Here’s a short video demonstrating the issue:

TestBuble.Home.Assistant.-.Google.Chrome.2024-12-11.14-16-09.mp4

[MrBearPresident]

I've tried and tried with the hui-elements. Until I saw this post. Then I tried it with mod-card, now I have a working use case.

2024-12-20_11-40-29.mp4

type: picture-elements
elements:
  - type: custom:mod-card
    style:
      top: 20%
      left: 25%
      width: 40%
    card_mod:
      style: ""
    card:
      type: custom:bubble-card
      card_type: button
      button_type: state
      name: "Click me for #sun"
      entity: sun.sun
      tap_action:
        action: navigate
        navigation_path: "#Sun"
      button_action:
        tap_action:
          action: navigate
          navigation_path: "#Sun"
  - type: custom:mod-card
    style:
      top: 20%
      left: 75%
      width: 40%
    card_mod:
      style: ""
    card:
      type: custom:bubble-card
      card_type: button
      name: "Click me for #sun2"
      button_type: state
      entity: sun.sun
      tap_action:
        action: navigate
        navigation_path: "#Sun2"
      button_action:
        tap_action:
          action: navigate
          navigation_path: "#Sun2"
  - type: custom:mod-card
    style:
      top: calc(20% + 55px)
      left: 25%
      width: 40%
    card_mod:
      style: ""
    card:
      type: custom:bubble-card
      card_type: button
      button_type: state
      entity: sun.sun
      tap_action:
        action: navigate
        navigation_path: "#Sun"
  - type: custom:mod-card
    style:
      top: calc(20% + 55px)
      left: 75%
      width: 40%
    card_mod:
      style: ""
    card:
      type: custom:bubble-card
      card_type: button
      button_type: state
      entity: sun.sun
      tap_action:
        action: navigate
        navigation_path: "#Sun"
  - type: custom:mod-card
    name: pop-up
    style:
      top: 5%
      left: 50%
      width: 100%
    card_mod:
      style: ""
    card:
      type: vertical-stack
      cards:
        - type: custom:bubble-card
          card_type: pop-up
          hash: "#Sun"
          button_type: state
          entity: sun.sun
          sub_button:
            - entity: sun.sun
              show_state: true
              state_background: true
              show_icon: true
              show_attribute: false
              name: Switch
              tap_action:
                action: toggle
              double_tap_action:
                action: more-info
              hold_action:
                action: more-info
          bg_blur: "4"
          bg_opacity: "75"
          bg_color: "#123456"
          width_desktop: 80%
          hide_backdrop: true
          backdrop_blur: "0"
          shadow_opacity: "0"
          styles: |-
            div.bubble-pop-up.pop-up{
              bottom: 0px !important;
              top: 0px !important;
            }
            div.bubble-pop-up.pop-up.is-popup-opened{
              height: 10000px !important;
            }
            div.bubble-pop-up.pop-up.is-popup-closed{
              height: 0px !important;
            }
  - type: custom:mod-card
    name: pop-up
    style:
      top: 5%
      left: 50%
      width: 100%
    card_mod:
      style: ""
    card:
      type: vertical-stack
      cards:
        - type: custom:bubble-card
          card_type: pop-up
          hash: "#Sun2"
          button_type: state
          entity: sun.sun
          name: This is Sun2
          sub_button:
            - entity: sun.sun
              show_state: true
              state_background: true
              show_icon: true
              show_attribute: false
              name: Switch
              tap_action:
                action: toggle
              double_tap_action:
                action: more-info
              hold_action:
                action: more-info
          bg_blur: "4"
          bg_opacity: "75"
          bg_color: "#123456"
          width_desktop: 80%
          hide_backdrop: true
          backdrop_blur: "0"
          shadow_opacity: "0"
          styles: |-
            div.bubble-pop-up.pop-up{
              bottom: 0px !important;
              top: 0px !important;
            }
            div.bubble-pop-up.pop-up.is-popup-opened{
              height: 10000px !important;
            }
            div.bubble-pop-up.pop-up.is-popup-closed{
              height: 0px !important;
            }
image: https://wallpaperaccess.com/full/961099.jpg
grid_options:
  columns: full

---

^{If this solves your problem, mark this as the solution and close the discussion.}

[Menelao147]

This looks perfect, I'll try it later and provide feedback.
Thanks

[Menelao147]

I've tried and tried with the hui-elements. Until I saw this post. Then I tried it with mod-card, now I have a working use case.

Hi,
thank you for the suggestion to use custom:mod-card.
I tried implementing it as you suggested, and I can confirm that it does solve the issue of opening the popup within the picture-elements card.
However, it introduces some additional problems:

• Glitches during opening and closing the popup:
  • On opening: The popup briefly appears, then disappears, and reappears with the animation.
  • On closing: The popup shrinks in size before disappearing.
    You can see this behavior in this video.

PopUp.mp4

• Popup appearance: The displayed popup doesn't look the same as it does outside the picture-elements card.

Thank you again for your help!