search

PitPik / tinyColorPicker

Tiny jQuery color picker for mobile and desktop with alpha channel
http://www.dematte.at/tinyColorPicker/
MIT License
276 stars 77 forks source link

Problem with Modal Bootstrap (z-index) #57

Open vitalibr opened 8 years ago

vitalibr commented 8 years ago

Hi!

I use the tinyColorPicker, this is awesome plugin :) But I'm having trouble with the tiny Color Pick and bootstrap modal. The tiny div is behind the modal, did a test by changing the Z-Index cp-color-picker class for "1000000" and it worked, but I do not know if it's the best way to do it. And that should be included in the source code.

Without z-index: no zindex

With z-index: zindex

PitPik commented 8 years ago

Hi @vitalibr well, this kind of problems occur quite often. Every library wants to be on top ;o) Well, there is options you can set for the color picker, so, you can use cssAddon in your options to take care of this.

$('.color').colorPicker({
    cssAddon: '.cp-color-picker {z-index: 1000000;}'
});

Let me know if this doesn't work for you.

BTW: Most browsers' highest z-index is 16777271, some support also 2147483647

PitPik commented 8 years ago

Hi @vitalibr , I just released a new version of tinyColorPicker with a new callback function positionCallback. You can use this callback for several things like positioning your color picker on toggle or even append it to another element. So you could actually append it to the dialog and then calculate the position from there. This way it stays positioned correctly even if the modal dialog container moves... See the ./demo/index.js for a demo... Hope this helps.

If those solutions made things work for you could close this issue if you want to. If you like tinyColorPicker I would appreciate a ★ very much ;o)

justingolden21 commented 5 years ago

Try: .cp-color-picker { z-index: 1051 !important; /*bootstrap modal is 1050*/ }