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

Keep widget aligned to its reference on mobile devices #189

Closed paul-lrr closed 4 years ago

paul-lrr commented 4 years ago

Is your feature request related to a problem? Please describe. The Pickr pop-up is always centered on the page instead of connected to the button if the browser window is too narrow.

Describe the solution you'd like I assume the (matchMedia('(max-width: 576px)') line that switches the margins to auto and centers the popup is intended to make the picker work better on mobile devices, which is a fine idea, but I have a situation where I want the window that Pickr is being used in to be a narrow sidebar. It would be handy if the max-width value could be overridden with a configuration option instead of being hard coded.

Describe alternatives you've considered Obviously I can manually tweak the max-width value myself in the source code, but that isn't a great solution.

simonwep commented 4 years ago

That it gets centered on mobile devices wasn't my initial idea to be honest, it developed that way because I couldn't find a way to properly align it on mobile-devices (the scrolling works differently on mobile / desktop)... I'm open to any Idea of how to change it completely that way it works the same as on desktop :)

The (matchMedia('(max-width: 576px)') was basically just a cheap and fast way to "bypass" this issue...

paul-lrr commented 4 years ago

No sure what would be a better solution for mobile, but in the spirit of cheap and fast solutions 😏 , it would be great if the matchMedia check could be made optional (or a configurable value) to handle the case of wanting to use Pickr in a narrow browser window.

simonwep commented 4 years ago

The problem is the user-input is really messed up due to the browsers attempt to align the input field with the virtual-keyboard 😕:

Nano layout Classic layout
photo5235666328004701224 photo5235666328004701225
simonwep commented 4 years ago

@paul-lrr I'll try to come up with a solution in the next days (this issue really bugs me), otherwise I'll add an option to disable it :)

simonwep commented 4 years ago

OK I've managed to come up with a (hopefully) working version, this time pickr will always try to stick to it's reference element (the button) - only if the user tries to change the input it'll center it if regular positioning fails, this way it works in scrollable containers (will disappear if out-of-view) but will be greatly visible during mobile / low-res screens user-input.

Updated in 6986a75b2c7028b34722527c5ad14b2bdefd6dd5, it's kinda complex and I'd love to get a feedback from you if everything works as expected (using the current dist-files) since I've only tested it locally and in the Environment of the demo-page!

paul-lrr commented 4 years ago

That seems to be working great! I'm using the nano theme and the pop-up stays with the button regardless of the window width. 👍

On mobile (iPhone 11 running iOS 13) the popup also stays with the button. When I tap on the input field, the popup moves to the top of the screen but I assume this is to account for the for the keyboard. There is a small amount of positioning weirdness when I open the popup on mobile while zoomed in but I think that is a fairly narrow use case

simonwep commented 4 years ago

Awesome! Yeah, zooming is currently not taken into account - gets even more weird to implement that...

Anyway, I've published 1.5.0 where this "update" is applied :)