PitPik/tinyColorPicker

ColorPicker doesn't always work well with flex box - Chrome

ChadKeating opened this issue · 2 comments

http://pastebin.com/2XGxUrME

Simple paste bin to try out with Chrome.
It's impossible to close the color picker.
The key css elements are the flex box and the font size 0
1px font size seems to fix it.
Also the mouse events seem to be tied directly to the body so without height 100$ you cant close the color picker by clicking on the bulk of the page.

Hi @ChadKeating,
there is more ways you can fix this problem:

  • One is to add some text after the <input> (one character is enough. The problem here is that if you don't have text after your input, after blurring, the input gets focused again... don't ask me why ;o)
  • The second is to drop font-size: 0px; and use text-indent: -100%; instead.
  • The mouse event is not tied directly to the body if you don't want to. Just use the body option:
$(".not-working-correctly").colorPicker({
    body: window
});

Hope this helps
Cheers

Hi,

Thanks for some options. For now I have used color: transparent !important;