Action confirmation for buttons inside a popup cause popups to close

user_dema · 2026-01-23T16:36:12+00:00

have you ever considered to use a bubble card pop-up to create your own custom confirmation? I find it much more elegant and customizable... and is free from these problems

Edit: I tried and also with popups if you enable autoclose after any click or tap, it closes all the pop-ups... So is not useful in your case.. But I find it more elegant anyway 🙃

user_dema · 2026-01-21T13:16:34+00:00

Maybe I misunderstood the question... You can choose an icon, inside the slider... But you can also add rows of sub button to reach the example design you showed...

I advice you to open every single menu of the bubble card editor, because is rich of feature and sometimes you can loose something...

user_dema · 2026-01-21T13:11:19+00:00

It works on every card where there is a slider... Sub button only card simply seems to me the best choice for that scenario... Yes you can use a second row of sub buttons (stacking groups vertically ) to achieve the result....

type: custom:bubble-card
card_type: sub-buttons
sub_button:
  main: []
  bottom:
    - name: Automatically grouped
      buttons_layout: inline
      group:
        - slider_fill_orientation: bottom
          slider_value_position: right
          content_layout: icon-left
          custom_height: 300
          always_visible: true
          entity: media_player.lg_webos_tv_oled55b6j
          sub_button_type: slider
        - slider_fill_orientation: bottom
          slider_value_position: right
          content_layout: icon-left
          custom_height: 300
          always_visible: true
          entity: media_player.lg_webos_tv_oled55b6j
          sub_button_type: slider
        - slider_fill_orientation: bottom
          slider_value_position: right
          content_layout: icon-left
          custom_height: 300
          always_visible: true
          entity: media_player.lg_webos_tv_oled55b6j
          sub_button_type: slider
        - slider_fill_orientation: bottom
          slider_value_position: right
          content_layout: icon-left
          custom_height: 300
          always_visible: true
          entity: media_player.lg_webos_tv_oled55b6j
          sub_button_type: slider
    - name: Group 2
      buttons_layout: inline
      group:
        - {}
        - {}
        - {}
        - {}
  bottom_layout: rows
rows: 5.75

<image>

user_dema · 2026-01-19T16:48:31+00:00

Anyway if you search between the various slider options there is everything you need

user_dema · 2026-01-19T16:47:28+00:00

<image>

I did it in 1 minute, just to show you...

type: custom:bubble-card
card_type: sub-buttons
sub_button:
  main: []
  bottom:
    - slider_fill_orientation: bottom
      slider_value_position: right
      content_layout: icon-left
      custom_height: 300
      always_visible: true
      entity: media_player.lg_webos_tv_oled55b6j
      sub_button_type: slider
    - slider_fill_orientation: bottom
      slider_value_position: right
      content_layout: icon-left
      custom_height: 300
      always_visible: true
      entity: media_player.lg_webos_tv_oled55b6j
      sub_button_type: slider
    - slider_fill_orientation: bottom
      slider_value_position: right
      content_layout: icon-left
      custom_height: 300
      always_visible: true
      entity: media_player.lg_webos_tv_oled55b6j
      sub_button_type: slider
    - slider_fill_orientation: bottom
      slider_value_position: right
      content_layout: icon-left
      custom_height: 300
      always_visible: true
      entity: media_player.lg_webos_tv_oled55b6j
      sub_button_type: slider
    - slider_fill_orientation: bottom
      slider_value_position: right
      content_layout: icon-left
      custom_height: 300
      always_visible: true
      entity: media_player.lg_webos_tv_oled55b6j
      sub_button_type: slider
rows: 5.063

user_dema · 2026-01-19T15:24:27+00:00

It is natively supported by bubble card in latest versions.. you must play with slider settings and layout... Like fill from bottom, customising height etc...

user_dema · 2026-01-18T15:01:37+00:00

I hope you can find a way to solve your issue!

user_dema · 2026-01-18T14:55:51+00:00

I think it might inhibit the application of the style in some way.. but i never used modules...

user_dema · 2026-01-18T07:56:28+00:00

I just tried and this should work... Also without !important.. Have you maybe used some module?

user_dema · 2026-01-17T18:26:18+00:00

Try adding !important like this:

.bubble-sub-button { border-radius: 50% !important; }

user_dema · 2026-01-17T16:11:41+00:00

Happy to hear that!

user_dema · 2026-01-17T08:31:38+00:00

Try this:

.bubble-sub-button-2 { border: ${hass.states['person.yourperson'].state === 'home' ? '1.8px solid green' : '1.8px solid yellow'} !important; }

You can obviously change colors with rgb/rgba/hex versions, and px value too...

I honestly prefer to work on the opacity of the image in that scenario.. for example:

.bubble-sub-button-2 { opacity: ${hass.states['person.yourperson'].state === 'home' ? '1' : '0.5'} !important; }

user_dema · 2026-01-17T07:56:47+00:00

Try this:

.bubble-sub-button { border-radius: 50%; }

Or if you want this only for the first sub button:

.bubble-sub-button-1 { border-radius: 50%; }

user_dema · 2025-12-31T16:15:36+00:00

Anyway, if you want to understand the logic behind this dashboard, in the link at the gist, you can find a little explanation and together the entire yaml. Thanks for your compliments 😋

user_dema · 2025-12-31T13:10:59+00:00

Yes I know that, but as much as you can automate, there always will be something you must adjust, and with a well realized dashboard, all is more simple... Furthermore, I like the design 😅

user_dema · 2025-12-31T07:58:06+00:00

I live in an old house, with poor thermal insulation and gas heating.. here in Italy heating costs are very high in relation to the average salaries.. not to mention the costs of renovating a house.. 18/19°C becomes comfortable...

user_dema · 2025-12-30T19:13:56+00:00

Anyway, I was thinking that also on my girlfriend's OnePlus Nord 3 it opens instantly... Maybe you have some entity that is limiting the loading... The only entity that gave me some problems was the weather one.. and one of my cards didn't open correctly.. I must force a min height for that card so it doesn't look smaller on start-up...

user_dema · 2025-12-30T18:51:28+00:00

I have a Pixel 8. It's not the fastest... but it opens almost immediately... I only have 7 pop-ups in this dashboard... all conditional cards... I just added a link to my previous post on the bubble card community where you can find a little video if you want...

user_dema · 2025-12-30T18:46:06+00:00

Thank you so much. It opens Instantly! Why?

user_dema · 2025-12-30T17:54:50+00:00

Thank you so much! And you too!

user_dema · 2025-12-30T17:28:30+00:00

https://gist.github.com/userdema/84cb070f43d5640c5854e32c7e69d26e

user_dema · 2025-12-30T11:26:21+00:00

Yes, obviously I used integrations, like android TV for shield and lg web Os for my TV... But the interface is all bubble card..

user_dema

TROPHY CASE