search

Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
2.1k stars 65 forks source link

Dropdown menus out of place? #469

Open jockebq opened 7 months ago

jockebq commented 7 months ago

I have some weird behaviour with lovelace-xiaomi-vacuum-map-card 1 in a Bubble Card. On desktop when clicking the dropdown:

On mobile when clicking the dropdown:

And if I click the dropdown on a normal card (not bubble card), works with mobile and desktop:

This is on 1.7.3, updated to 2.0 Beta 2 to try if it was fixed. Now I cannot even see the dropdown at all?

Clooos commented 7 months ago

This issue should be fixed in the next release, thank you for the feedback!

Clooos commented 7 months ago

This issue is now fixed in the new beta!

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.3

jockebq commented 7 months ago

This issue is now fixed in the new beta!

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.3

Just updated to the Beta 5, but I still experience the exact same behaviour. Tried restarting Home Assistant, using a private browser to be sure it wasn't cookies. But it is the same as before?

Clooos commented 7 months ago

Do you have modified the style of this card by any chance? And also was it working with the previous 1.7.3 release?

jockebq commented 7 months ago

Some modifications, but I tried with a default vacuum card and experienced the same issue. It did not work with 1.7.3 or any Beta version.

Clooos commented 7 months ago

Thank you for the details, I will take a closer look at this but it's not possible that this issue is from that specific card.

Clooos commented 7 months ago

I've just tried and indeed this issue is from that card, there is nothing that I can do on that.

But it would be great if you could open an issue on its GitHub 🙂

jockebq commented 7 months ago

I've just tried and indeed this issue is from that card, there is nothing that I can do on that.

But it would be great if you could open an issue on its GitHub 🙂

I did speak with the creator of that integration, and he pointed the issue at the Bubble Card. https://community.home-assistant.io/t/vacuum-interactive-map-card/123901/1849

Clooos commented 7 months ago

Like he said:

"I suspect that Bubble Card modifies some properties that are used by the dropdown to determine its position… It is a problematic thing to fix"

This is indeed because you are putting it in a pop-up but there is nothing that I can do about that, this issue is still about how this card is positioning that dropdown. The pop-ups are not modifying the CSS of the cards inside of it.

joq3 commented 2 months ago

I have done some more testing, and it seems to be only happening on a mobile browser, or if you go to developer mode and select a phone on your regular browser. That way the drop downs are always misplaced when inside a Bubble card (does not happen outside Bubble cards). Using it on a desktop browser it works fine in Bubble cards however.

So there seems to be an issue with Bubble card and specifically in mobile mode.

joq3 commented 2 months ago

Found the issue! I have all my popups set to "Optional - Top margin on mobile" to 6% to not go all the way up. This is what causes the issue with the select not being correctly displayed.

Same issue happens if I change from % to vh. Any idea on how to solve this? Right now it only works properly with -56px

Clooos commented 2 months ago

Hi! Have you tried to use calc(100vh - 400px)? Just replace 400px with the size you want for your pop-up, this should works.

joq3 commented 2 months ago

Hi! Have you tried to use calc(100vh - 400px)? Just replace 400px with the size you want for your pop-up, this should works.

Tried it, with the same result as the other settings. I actually was wrong about it working fine on desktop. On desktop it only works properly inside the editor preview. But when I view it on my dashboard I cannot even see the select items after I click select: bild

This is how it looks on mobile with -56px which is how it should look. bild

joq3 commented 2 months ago

This is my current settings: bild

Setting top margin on desktop to 0px (or empty) does not even show the bubble card? I have to set it to something else.

Clooos commented 2 months ago

I've tried and I can reproduce your issue, I will try to fix that for the next release 🤞

joq3 commented 2 months ago

I've tried and I can reproduce your issue, I will try to fix that for the next release 🤞

Fantastic! On both mobile and desktop?

Clooos commented 2 months ago

I tried only on desktop for now, I will try both.

Clooos commented 2 months ago

For some reason it is working for me by adding:

bg_blur: none

Can you confirm this?

joq3 commented 2 months ago

For some reason it is working for me by adding:

bg_blur: none

Can you confirm this?

Yes, that solves the issue! Is there any workaround I can do to fix the issue while keeping the bg_blur on?

Clooos commented 2 months ago

I'm on it, I just wanted to be sure 👌

Clooos commented 2 months ago

I've finally fixed it, just wait for the next beta release! 🥳

joq3 commented 2 months ago

Great! Thank you!

Clooos commented 1 month ago

Hi, the new beta is here, I hope that it is working now 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v2.3.0-beta.2