Support for nested, scrollable containers

[bjarnef]

When opening the color picker overlay and then scroll using mousewheel, it seems it doesn't keep to overlay relative positioned to the button. In this case it use position: 'right-end'.

[simonwep]

Please stick to the Issue Template when you create a new one. This will help me to resolve it as fast as possible.

What's your pickr-version, which browser / OS or general Environment?
It's related to #79 - Pickr is always appended to the body, therefore clipping / hiding of it in a non-fullscreen element would be too complicated. Adding this would bloat it to much.

What about an option to hide it if the user scrolls? Would be the easiest and a ux-conform solution.

[simonwep]

Probably fixed in ba94bf7

[bjarnef]

Sorry for the missing details.

Pickr-version (see Pickr.version): 0.6.5
Used Pickr-bundle (es5 or normal one): Normal bundle
Browser-version:  Google Chrome Version 75.0.3770.80
Operating-system:  Windows 10

I couldn't reproduce the issue in this jsfiddle:
https://jsfiddle.net/ntr0amdg/1/

I tested it a bit how it would work as a color picker (property editor) in Umbraco CMS. Btw. would it be okay to use this in a package and publish this to the community on https://our.umbraco.com/packages/ with some credits to your project, if I decide to use this in a package?

I guess the issue here is that the editing area is a separate scrolling area.

It would be great with an option to hide the color picker overlay on user scroll, but I guess scrolling with mousewheel inside color code input should still spin the HEXA/RGBA/HSVA code?

[simonwep]

No problem :) Thank's for the issue!

Yeah, nested scrolling is a problem... Since you wouldn't be the last one who requests this I've added a closeOnScroll option in 54be4fe. Set it to true to hide pickr if the user scrolls somewhere on the page :)

Regarding to your CMS - of course :) I'm currently working on themes and animations which are getting published in a few days, see theming and animatable. Maybe you want to wait until the next / first major version (1.0.0) where these features get implemented.

To your last point, yes. Using the mouse-wheel still works, even in a scrollable context :)

[simonwep]

Okay, the patch / option is available in 0.6.6 :)

[bjarnef]

Thanks, not sure if there is an easy way to fix this for now, maybe specifying the (parent) container or in some other way make the overlay "relative" to the color picker button, while the overlay itself is appended to the body? https://flaviocopes.com/how-to-get-scroll-position-element/

Umbraco is using FlatPickr as a date picker, which seems the have the same issue in this context, so it is probably a bit more complicated to "fix" this.

Anyway it is a great alternative for now :)

Yes, I might wait a until the version 1.0.0 ... the theming seems ideal when used in CMS'es and similar where you want a custom theme/skin, e.g. Umbraco has a custom theme/skin for the TinyMCE richtext editor.

[simonwep]

Scrolling is already taken into account, see this nanopop function. The main issue would be to restrict it to an element, adding it to an container element could lead to problems since pickr is not fixed anymore :/

[simonwep]

Hey @bjarnef! Does this issue still exist? We're now at 1.6.0 and the positioning engine itself has become a project of its one (see NanoPop) ^^