search

sefianecho / alwan

A simple, lightweight, customizable, touch friendly color picker, written in vanilla javascript with zero dependencies.
https://sefianecho.github.io/alwan/
MIT License
39 stars 6 forks source link

When there is a dialog element, the color picker box displays behind it #17

Closed tranthanhhoang060391 closed 5 months ago

tranthanhhoang060391 commented 6 months ago

Hi,

Thank you for your great work!

Recently, I tried to set up a library in a dialog element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog), whenever I click a button color, the color picker shows up behind the dialog

Screenshot 2024-04-16 at 21 32 37 Screenshot 2024-04-16 at 21 32 48

I believe the cause is the Top Layer (https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

I tried to move the <div class="alwan" ... ></div> inside the dialog, it does help to display the color picker panel above the dialog element but the position of the picker panel is incorrect ( the transform: translate CSS)

Screenshot 2024-04-16 at 21 48 20

Thank you so much for your supporting

sefianecho commented 6 months ago

Hi, I understand the problem, it's a little bit complicated but I will try to fix it as soon as possible.

apeisa commented 6 months ago

Any news regarding this? Would you accept PR:s?

PS: @sefianecho do you take sponsors or any other means to support your great work with this? We use it a lot on our Saas platform and it would be great to support your project somehow.

sefianecho commented 5 months ago

Sorry for taking so long. The problem should be fixed now, just set the parent option to an element inside the dialog element.

As for the support I'll try to setup a sponsor page.