Size of colourpicker

[ray73864]

Is there any way to increase the size of the colour picker itself?

I looked at the code and saw a bunch of

statements for defining the template itself, but couldn't see how i could increase the size of the picker using that.

[itsjavi]

That's not a trivial thing as the colorpicker gradient images have fixed dimensions and the coordinates are calculated based on these dimensions, but in the future it will be interesting to use CSS3 gradients instead of bg. images and add the possibility to resize de picker.

[santon2000]

+1

[minddust]

you just need to adjust the coordinates (manually) for a quick - non generic - solution.

e.g. double the size:

css

.colorpicker-saturation {
  width: 200px;
  height: 200px;
  ...
}
.colorpicker-hue,
.colorpicker-alpha {
  width: 25px;
  height: 200px;
  ...
}

js

$colorpicker.colorpicker({
    sliders: {
        saturation: {
            maxLeft: 200,
            maxTop: 200,
            callLeft: "setSaturation",
            callTop: "setBrightness"
        },
        hue: {
            maxLeft: 0,
            maxTop: 200,
            callLeft: false,
            callTop: "setHue"
        },
        alpha: {
            maxLeft: 0,
            maxTop: 200,
            callLeft: false,
            callTop: "setAlpha"
        }
    }
});

live demo here: https://www.pixelmaker.io/

[itsjavi]

Hi @minddust thank you for your support! Now I added a demo in the docs for this, @santon2000

[santon2000]

Thanks to all!

[coolph007]

This does increase the width and height but unable to select colors in bottom right quarter. And can't drag pointer beyond the top half as well. Any workaround?