search

simonwep / pickr

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
https://simonwep.github.io/pickr
MIT License
4.31k stars 285 forks source link

Question about reposition #253

Closed yahoo0742 closed 3 years ago

yahoo0742 commented 4 years ago

https://github.com/Simonwep/pickr/blob/3beee11761c165a1ed44084516cdcbc463e8d537/src/js/pickr.js#L507

Hi Simon,

I wonder why you specified the container as "document.body"? One case is that the or is just a part of the document/window, then the position is unexpected. An example can reproduce the problem is simply changing the body height as 40% or something from the demo you provided https://jsfiddle.net/Simonwep/9ghk71c3/

Thanks, Wenbo

unlocomqx commented 3 years ago

I encountered the same issue where the body sizing is not correct for some reason (I'm using the picker inside a page I don't fully control) so I needed to change the container to get the correct bbox. It would be great if the container bbox is used and the body bbox becomes a fallback Thank you

yairEO commented 3 years ago

There is a reason for placing popups right on the <body> element and not in the container of whatever which triggered the popup, because:

  1. the size of the container might not be enough to fit
  2. container might have overflow:hidden
  3. container might have a scrollbar (related to 1)

Many things can go wrong, so placing popups on the document body should work for the vast majority of scenarios.

I do however see edge-cases where one would need to place a popup on a different container, I have encountered myself with such need working on a very large projects where I have interference from CSS if things were places right on the body. I don't remember exactly why, but I do remember the need to place some popups elsewhere.

simonwep commented 3 years ago

See Options, you can use container to specify the parent from pickr. I can't remember the original reason for this but there was an issue about it where body didn't work. @yairEO Also covered a few of the reasons why I didn't pick the button-parent, thank you for that! For anything else the container option can be used :)

unlocomqx commented 3 years ago

I had a case where the body didn't take the full height of the page and the body bbox was "wrong", that's why the positioning didn't work well for me. Now it's all good, I found a simple fix! (overflow: auto; on html, body)