search

mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
443 stars 58 forks source link

When used in modal dialog-tag, color picker is displayed behind the modal #100

Closed h-eriksson closed 1 year ago

h-eriksson commented 1 year ago

First time reporting an issue. I hope I'm doing this right.

If a dialog tag, opened through .showModal() is used to display the Coloris element, when activated, the actual color-picker is opened behind it. The Coloris-element is showing up as expected on the modal though. As the color-picker seems to be part of the normal DOM-flow, instead of the modals flow, it can't be accessed. If the modal is large enough, the color-picker is completely blocked from view, and will not even show to the user.

h-eriksson commented 1 year ago

Quick update: Found a workaround, and emphasis on workaround.

It is possible to grab the color-picker in the 'open' event-handler, store it to a variable, remove it from the DOM, and then append it to the modal dialog as a child. This requires some finessing with the position though as the color-picker is relative to the viewport. In the modal, those coordinates will displace the color-picker drastically as it's related to the dialog now. Fully workable so far anyway, but would be preferable if the color-picker is opened directly as a child to the dialog when the Coloris-element is a child of it.

melloware commented 1 year ago

Isn't that what the "parent" attribute of the colorPicker is for to where you want it attached else it defaults to DOM Body?

mdbassit commented 1 year ago

Indeed! You need to set the parent option in this case.

h-eriksson commented 1 year ago

And here we have it. Proof positive that I should never "just figure it out before bed", and go to bed instead, when the problem IS THE VERY FIRST ITEM in the documentation. I feel a bit dumb now. Thanks guys.

So, should this entire thread be removed now?

mdbassit commented 1 year ago

Glad you got it to work. Let's leave this archived for users who might have the same issue.