tinyColorPicker icon indicating copy to clipboard operation
tinyColorPicker copied to clipboard

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

Open RollAdvantage opened this issue 9 years ago • 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.

RollAdvantage avatar Aug 02 '16 21:08 RollAdvantage

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

PitPik avatar Aug 02 '16 22:08 PitPik

Hi,

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

RollAdvantage avatar Aug 02 '16 22:08 RollAdvantage