Pop up in vertical card

[tal6203]

For any feature request you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/feature-requests

For any question you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/q-a

Describe the bug

I have to vertical card to create pop? I ask because flipdown card freezing in vertical card so maybe there is a replacement?

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

HA logs
If applicable.

Browser console logs
If applicable.

Screenshots
If applicable, add screenshots to help explain your problem.

YAML
If applicable, add any relevant YAML code.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#timer_ac_salon"
    name: טיימר של המזגן בסלון
    icon: mdi:timer
    button_type: name
  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          background: rgba(0,0,0,0.4) !important;
          backdrop-filter: blur(10px);
          border-radius: 22px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.4);
          padding: 12px 10px;
        }
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:flipdown-timer-card
              entity: timer.ac_timer_salon
              name: זמן נותר
              show_hour: true
              show_title: true
              show_header: true
              theme: hass
              styles:
                rotor:
                  width: 50px
                  height: 70px
                button:
                  width: 0px
                  location: bottom
              show_error: false
              card_mod:
                style: |
                  :host {
                    direction: ltr !important;
                  }
            - type: custom:bubble-card
              card_type: button
              name: הפעל מחדש
              icon: mdi:restart
              entity: timer.ac_timer_salon
              tap_action:
                action: call-service
                service: timer.start
                service_data:
                  entity_id: timer.ac_timer_salon
              card_mod:
                style: |
                  ha-card {
                    margin-left: 25px;
                    margin-right: 25px;
                    margin-bottom: 8px;
                  }    

Information (please complete the following information):

• OS: [e.g. iOS] 2025.10.04
• Browser/App: the application[e.g. chrome, safari]
• Bubble Card version: 3.0.4[e.g. 2.0.4]
• Home Assistant version:2025.10.4 [e.g. 2024.6.4]

Additional context
Add any other context about the problem here.

Thank you! 🍻

[tal6203]

If you could provide support for a card like a stack-in-card to wrap the pop-up, that would be amazing, and I believe that fifty percent of live update failures are due to the vertical-stack card.

[Clooos]

Hi! I'm not sure to understand what you're asking, but I see that you use card_mod for your custom styles, Bubble Card supports these by default without the need to use card_mod.

https://github.com/Clooos/Bubble-Card/?tab=readme-ov-file#styling

So there is no need for this:

- type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          background: rgba(0,0,0,0.4) !important;
          backdrop-filter: blur(10px);
          border-radius: 22px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.4);
          padding: 12px 10px;
        }

These styles can be added directly in the pop-up card, so no need to add a custom:stack-in-card. Check the link above.

You're setup seems extremely difficult to achieve something that can be done with only Bubble Cards. This is maybe the reason of your issue.

[tal6203]

Hi! I'm not sure to understand what you're asking, but I see that you use card_mod for your custom styles, Bubble Card supports these by default without the need to use card_mod.

https://github.com/Clooos/Bubble-Card/?tab=readme-ov-file#styling

So there is no need for this:

- type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          background: rgba(0,0,0,0.4) !important;
          backdrop-filter: blur(10px);
          border-radius: 22px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.4);
          padding: 12px 10px;
        }

These styles can be added directly in the pop-up card, so no need to add a custom:stack-in-card. Check the link above.

You're setup seems extremely difficult to achieve something that can be done with only Bubble Cards. This is maybe the reason of your issue.

The problem is that the flipdown timer card is frozen and not updated due to the vertical stack card cover. I checked it, now the problem is that without it it is not possible to create your pop-up and I don't want to leave your design. Your cards are really beautiful and high quality. I know that if any other card like say stack in card does work, is there another way or another solution for vertical stack?

[Clooos]

Have you tried to enable this option? (Then refresh your page)

[tal6203]

Have you tried to enable this option? (Then refresh your page)

I clicked on this option but it still doesn't solve the problem.

Please help me I love your cards so much and this option is so important to me.

[tal6203]

Do you have any idea? @Clooos

[tal6203]

Are you fix this bug in next version? @Clooos

[Clooos]

I've worked on the pop-ups to fix some issues, this will maybe fix your issue as well.

[tal6203]

If not, will this solve the problem? Will you let me know? @Clooos

[Clooos]

I will not be able to try this specific case myself, I have enough work with the upcoming release. But I will let you know when the release is available 👌

But please be a bit more patient, I still have some work to do before the release (the beta will come sooner if you want to try it).

[tal6203]

Okay, so in the end I did manage to fix the clock freeze problem, I just put the stack-in-card insted of vertical-stack and it works. The problem is only in the picture.

@Clooos

- type: custom:stack-in-card cards: - type: custom:bubble-card card_type: pop-up hash: '#timer_ac_bedroom' name: טיימר של המזגן בחדר שינה icon: mdi:timer button_type: name - type: custom:mod-card card_mod: style: | ha-card { background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(10px); border-radius: 22px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px 10px; } card: type: custom:stack-in-card cards: - type: custom:stack-in-card cards: - type: custom:flipdown-timer-card entity: timer.ac_timer_bedroom name: זמן נותר show_hour: true show_title: true show_header: true theme: hass styles: rotor: width: 50px height: 70px button: width: 0px location: bottom show_error: false card_mod: style: | :host { direction: ltr !important; } - type: custom:bubble-card card_type: button name: הפעל מחדש icon: mdi:restart entity: timer.ac_timer_bedroom tap_action: action: call-service service: timer.start data: entity_id: timer.ac_timer_bedroom card_mod: style: | ha-card { margin-left: 25px; margin-right: 25px; margin-bottom: 8px; }

[tal6203]

Are you see the bug? @Clooos

[tal6203]

Do you have any idea to fix ? @Clooos

[Clooos]

Please wait for the next release... The stack-in-card isn't supported for creating a pop-up.

Also please stop spamming.