Popup goes dark when trying to open a dropdown inside it.
fellipute opened this issue · comments
Describe the bug
I use a vacuum card inside a popup, when I try to open the dropdown to select the vacuum speed the popup goes dark.
To Reproduce
Steps to reproduce the behavior:
- Create a popup
- Insert a card inside that has a dropdown
- Try to open the dropdown
- See error
Expected behavior
The popup shouldn't go dark.
Screenshots
Mobile-.-Home-Assistant.mp4
Informations (please complete the following information):
- OS: Windows
- Browser Chrome
- Bubble Card version Beta8
- Home Assistant version 2024.5.3
Damn, that's an interesting bug, I will take a look at that.
I've just tested and I'm not able to reproduce this issue, but I've maybe fixed it by fixing some other issues.
So just wait for the next beta 🤞
Hi, can you tell me if you still have this issue with the latest beta?
Hi, can you tell me if you still have this issue with the latest beta?
Hi, same behaviour unfortunately :(
I have tried with the exact same card inside a pop-up and I'm unable to reproduce this issue. I've tried on Chrome as well.
For now I'm clueless but something might be wrong with your pop-up setup.
I have tried with the exact same card inside a pop-up and I'm unable to reproduce this issue. I've tried on Chrome as well.
For now I'm clueless but something might be wrong with your pop-up setup.
I just found out that something is adding a mask to the .bubble-popup-container css:
I'll try to find out which component is adding it, if the bubble card or the vacuum card.
btw, here's the full yml of the popup:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#aspirador'
button_type: state
entity: vacuum.roborock_s7
show_attribute: true
attribute: battery_level
show_state: true
show_last_changed: true
- type: custom:xiaomi-vacuum-map-card
map_source:
camera: camera.roborock_s7_map
calibration_source:
camera: true
entity: vacuum.roborock_s7
vacuum_platform: humbertogontijo/homeassistant-roborock
map_modes:
- template: vacuum_clean_zone
- template: vacuum_goto
- template: vacuum_clean_segment
predefined_selections:
- id: '16'
icon:
name: mdi:broom
x: 28625
'y': 26175
label:
text: Lavanderia
x: 28625
'y': 26175
offset_y: 35
outline:
- - 24800
- 24050
- - 32450
- 24050
- - 32450
- 28300
- - 24800
- 28300
- id: '17'
icon:
name: mdi:broom
x: 25450
'y': 33100
label:
text: Corredor
x: 25450
'y': 33100
offset_y: 35
outline:
- - 24700
- 29800
- - 26200
- 29800
- - 26200
- 36400
- - 24700
- 36400
- id: '18'
icon:
name: mdi:broom
x: 30750
'y': 29325
label:
text: Cozinha
x: 30750
'y': 29325
offset_y: 35
outline:
- - 29000
- 27000
- - 32500
- 27000
- - 32500
- 31650
- - 29000
- 31650
- id: '19'
icon:
name: mdi:broom
x: 29375
'y': 34200
label:
text: Sala
x: 29375
'y': 34200
offset_y: 35
outline:
- - 26200
- 28500
- - 32550
- 28500
- - 32550
- 39900
- - 26200
- 39900
- id: '20'
icon:
name: mdi:broom
x: 22600
'y': 28275
label:
text: Suíte
x: 22600
'y': 28275
offset_y: 35
outline:
- - 20500
- 25050
- - 24700
- 25050
- - 24700
- 31500
- - 20500
- 31500
- id: '21'
icon:
name: mdi:broom
x: 26150
'y': 29600
label:
text: Escritório
x: 26150
'y': 29600
offset_y: 35
outline:
- - 24900
- 27150
- - 27400
- 27150
- - 27400
- 32050
- - 24900
- 32050
- id: '22'
icon:
name: mdi:broom
x: 22625
'y': 33525
label:
text: Biblioteca
x: 22625
'y': 33525
offset_y: 35
outline:
- - 20450
- 31950
- - 24800
- 31950
- - 24800
- 35100
- - 20450
- 35100
map_locked: true
two_finger_pan: false
- type: custom:bubble-card
card_type: separator
name: Funções
icon: mdi:cog
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
entity: script.aspirador_ciclo_matinal
name: Ciclo Matinal
show_attribute: false
attribute: friendly_name
button_action:
tap_action:
action: none
- type: custom:bubble-card
card_type: button
entity: script.aspirador_ciclo_noturno
name: Ciclo Noturno
show_attribute: false
attribute: last_triggered
show_last_changed: false
show_state: false
button_action:
tap_action:
action: none
- type: custom:bubble-card
card_type: button
entity: input_boolean.aspirador_sujo
show_attribute: true
name: Aspirador Sujo
attribute: last_triggered
columns: 2
- type: custom:mushroom-number-card
entity: counter.aspirador_limpeza
display_mode: buttons
name: Ciclos de Limpeza
layout: vertical
secondary_info: none
@Clooos found the mask in here:
Bubble-Card/src/cards/pop-up/styles.ts
Line 24 in 94ad407
I just don't understand why it work in yours and in mine it gets black. Maybe the browser version or something like that?
This is strange indeed, have you tried to remove the mask with a custom style?
Like this:
.bubble-pop-up-container {
mask-image: none !important;
-webkit-mask-image: none !important;
}This is strange indeed, have you tried to remove the mask with a custom style?
Like this:
.bubble-pop-up-container { mask-image: none !important; -webkit-mask-image: none !important; }
For now this seems to work. Will use it on the popups that I have that has a dropdown.
But that's very strange, i'll try to debug and check why that behaves oddly on my side.
Thanks!
Should I close this issue now or we keep it open to track future similar problems?
You can let this open for now, you are maybe not the only one, but indeed this is very strange.
I've just released a new beta, I'm not sure but your issue is maybe fixed.
https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.12
I've just released a new beta, I'm not sure but your issue is maybe fixed.
https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.12
Just tried it, same behavior. I suspect its something on my side rather than the card itself.
No idea what though, but I'll keep using the CSS to fix it.
What this beta fixed though is that the dropdown was showing outside the card in the previous betas, and now it's showing correctly in the right position!
Nice, glad that you confirm this!
I've removed that mask, someone on the HA forum had the same issue as yours.
I will release a new version soon!
The new release is here, I haven't removed it but that should be fixed, can you confirm this?
https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-rc.1
The new release is here, I haven't removed it but that should be fixed, can you confirm this?
https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-rc.1
Nope, still black :(
Something broke on this last update btw:
cards are over each other.
Damn... 😅
max-height: 100% !important;
that's what's breaking lol
Thank you! Indeed I will remove it! And I will do my best to fix that issue without removing the masks, I love them too much 😅
Thank you! Indeed I will remove it! And I will do my best to fix that issue without removing the masks, I love them too much 😅
thanks! i'll rollback to beta12 for now
This was fixed for me in v2