simonwep / simonwep/pickr

wrong positioning

Open
#240 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
JavaScript
Stars
4.5k
Forks
292
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the supplied createColorPicker configuration and compare Pickr 1.6.0 with 1.7.2 in Chrome on Windows 10. Trace the Pickr.create call and its positioning behavior for position 'bottom-middle' and autoReposition; done means the picker is positioned relative to the target object as in 1.6.0.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.