Search code examples
javascriptcsscolorscolor-pickerfarbtastic

How can I change the width and height of Farbtastic Color Picker Wheel?


On the Farbastic Github Documentation it is mentioned that Width and Height of the Farbtastic Color Picker can be modified like this;

$(...).farbtastic({ callback: '#color2', width: 150 })

But, I am not able to customize the Width and Height of the Farbtastic Color Picker. Here`s my code;

colorPickerWheel = $.farbtastic("#colorPickerWheel", { width: 500, height: 500 });
colorPickerWheel.linkTo(pickerUpdate);

function pickerUpdate(color){
    console.log("Color Picker Wheel: " + color);
}

Waiting for the response, thanks!


Solution

  • Apparently width and height are not picked up if you omit the callback parameter (it's probably a bug). However you can workaround it by passing callback: pickerUpdate in the options object when initializing it.

    var colorPickerWheel = $.farbtastic("#colorPickerWheel", {callback: pickerUpdate, width: 500, height: 500});
    
    colorPickerWheel.setColor('#00ffff');
    
    function pickerUpdate(color){
        console.log("Color Picker Wheel: " + color);
    }
    

    https://jsfiddle.net/s2zhgsbr/1/