Disabling Auto-Fit?

[evolross]

Is there any way to disable the way the color-picker "auto fits" to the visible screen area?

This is happening in my app and the color picker gets moved to an area that covers up my UI and leaves the user unable to click the necessary buttons to choose a color or close the color picker.

Could I add a PR to pass this as a setting parameter when initiating? Or would this be something easy you could do?

EDIT: I see there's a fit hook that gets called when the color picker gets auto fitted, but there doesn't seem to be any easy way to "undo" or cancel the auto fit using that hook.

[taufik-nurrohman]

Like this?

https://github.com/tovic/color-picker/blob/7fe4ecc909cddbd7bcc6f43fefd1c4f43dbb685e/color-picker.static.html#L35-L37

[evolross]

That broke the placement altogether. I can't see the color picker at all now. This is probably wiping out its location entirely no?

[taufik-nurrohman]

Or just set some fixed offsets:

var left = e.target.offsetLeft,
    top = e.target.offsetTop;

picker.fit([left, top]);

[evolross]

I tried calling this inside of picker.on("enter", function(picker) {...} which works now (thank you) but there's nothing passed to the listener. So picker.self.offsetLeft is undefined.

If I try putting the above code into the picker.on("fit", function(picker) {...} listener, I can do that, but when I call picker.fit([left, top]) it creates an infinite loop, logically.

Where/when were you thinking the above code would live?

[taufik-nurrohman]

You can now use this.self.offsetLeft within the scope.

[evolross]

Circling back to this. I figured it out. Your very first suggestion/example was correct. I wasn't setting a placement element as the third param to the constructor. That's why overriding picker.fit wasn't working. Once I set a placement element, I could dial in the location perfectly using:

picker.fit = function() {
   //  Don't autofit picker - always set static location
   this.self.style.top = "34px";
   this.self.style.left = "37px"; 
};