wrong positioning

[yesilcimenahmet]

Hi,

With Picker 1.6.0 there is no problem with the current settings, but when I use 1.7.2 the Picker is not positioned relative to the object. It is located in the middle of the screen.

function createColorPicker(el, opt, optForAssignToObject) {
    let options = {
        useAsButton: true,
        el: el,
        theme: 'monolith', // or 'monolith', or 'nano'
        position: 'bottom-middle',
        autoReposition: true,
        padding: 4,
        swatches: [
            'rgba(244, 67, 54, 1)',
            'rgba(233, 30, 99, 1)',
            'rgba(156, 39, 176, 1)',
            'rgba(103, 58, 183, 1)',
            'rgba(63, 81, 181, 1)',
            'rgba(33, 150, 243, 1)',
            'rgba(3, 169, 244, 1)',
            'rgba(0, 188, 212, 1)',
            'rgba(0, 150, 136, 1)',
            'rgba(76, 175, 80, 1)',
            'rgba(139, 195, 74, 1)',
            'rgba(205, 220, 57, 1)',
            'rgba(255, 235, 59, 1)',
            'rgba(255, 193, 7, 1)'
        ],

        components: {

            // Main components
            preview: true,
            opacity: true,
            hue: true,

            // Input / output Options
            interaction: {
                hex: false,
                rgba: false,
                hsla: false,
                hsva: false,
                cmyk: false,
                input: true,
                clear: false,
                save: true,
                cancel: true
            }
        },
        strings: {
            save: 'Seç',  // Default for save button
            clear: 'Temizle', // Default for clear button
            cancel: 'Vazgeç' // Default for cancel button
        }
    };
    function assignTo(dest, src) {
        if (src && typeof src == 'object') {
            for (item in src) {
                if (typeof dest[item] == 'object')
                    dest[item] = mergeRecursive(dest[item], src[item]);
                else
                    dest[item] = src[item];
            }
        }
    }
    assignTo(options, opt);
    let picker = Pickr.create(options);
    assignTo(picker, optForAssignToObject);
    picker.getPickerColor = function () {
        return this.getColor().toRGBA().toString();
    }
    return picker;
}

Environment:

Version (1.7.2):
Used bundle (normal):
Used theme (monolith): 
Browser-version:  Chrome - 84.0.4147.13
Operating-system:  Windows 10

[simonwep]

This is expected behaviour. It's one of the caveats of NanoPop that you'll normally have to handle this manually, in case of pickr it centers the popup in case there is no way of positioning it.

Anyway, could you drop me a JSFiddle example?

[yahoo0742]

This seems not correct.

The picker is expected being above the button, rather than being clipped. A JSFiddle example here https://jsfiddle.net/720g4ch8/1/

Thank you!

[simonwep]

@yahoo0742 Huh, you either discovered an edge-case or somethings wrong on my side, everything is as expected:

What is your browser / OS version? ~Are you using the latest pickr version?~ The positioning engine pickr uses has visual tests so that must have something to do with pickr (can anyone confirm this?)

[yahoo0742]

@Simonwep, thanks for your response. I tested on 3 browsers on Mac OS 10.13.6: Chrome Version 85.0.4183.121 (Official Build) (64-bit) Firefox 81.0 (64-bit) And Safari Version 13.1.2 (13609.3.5.1.5) None of them worked as yours. An extreme case is as the screenshot below shows When I click the button, the picker is completely clipped.

[simonwep]

Maybe this is related to #246? Because seeing it break on all browsers is kinda weird 🤔

[yosef-123]

how did you set this to go under the button i tried costum css and on('show') css override and always goes to middle of the page why ?

[kirqe]

It seems the container the picker placed into should be 100vh...

Edit: The problem still exists when scrolling

https://user-images.githubusercontent.com/5272402/126507297-5b904c4c-db40-43d9-a5b7-5275ad2b1e21.mp4

[dresende]

This happens on my application and from what I found, it's nanopop that does not compute a position but it's not his fault. In my case, it's document.body.getBoundingClientRect() that returns height: 0. If I manually set a height it will work properly.

In my case, to solve it, I updates my core stylesheet to have something along the lines:

html, body { height: 100% }