Problem with Modal Bootstrap (z-index) #57

Activity

1. PitPik commented on May 13, 2016

   

   PitPik

   on May 13, 2016

   Owner

   More actions

   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
2. PitPik commented on May 19, 2016

   

   PitPik

   on May 19, 2016

   Owner

   More actions

   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)
3. justingolden21 commented on Jan 17, 2019

   

   justingolden21

   on Jan 17, 2019

   More actions

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