jQuery Color-picker z-axis problem

Question

I'm using this colorpicker, and it is wonderful. However, I want to use it inside a jQuery dialog box(on an input tag inside a form), but the problem is that when the colorpicker appears it is partially behind the dialog (on the z-axis) and therefore unusable. Any ideas?

This is the html: <input name="bgColor" class="colorSelector">

This is the js:

$('.colorSelector').ColorPicker({
    onSubmit: function(hsb, hex, rgb, el) {
        $(el).val(hex);
        $(el).ColorPickerHide();
    },
    onBeforeShow: function () {
        $(this).ColorPickerSetColor(this.value);
    }
})
.bind('keyup', function(){
    $(this).ColorPickerSetColor(this.value);
});

You need to give a little more information about how this looks and what you've got set up. As it is, if I were to attempt to answer your question, I'd have to not only pore through the plugin, I'd have to somehow know what's going on in your "jQuery dialog box". So flesh this out and see where it takes you. — treeface, Feb 14 '11 at 23:16
You'd obviously have to be familiar with the color-picker plugin to answer this question. As for the rest, I described it with more than enough clarity for anyone who has used jQuery: there is an input tag, inside of a form tag, inside of a dialog box. That's it, very simple. There is even a very clear example of the color-picker being used on an input tag in the above link I provided. — Yottagray, Feb 15 '11 at 14:09

Benjamin Intal · Accepted Answer · 2011-02-16T19:24:41.010

4

This works for inputs. I use this for the admin panel of my WP themes.

$selectedColor is a previously saved value or your default value.

<input type="hidden" name="myColor" id="myColor" value="<?=$selectedColor?>"/>
<div class="colorSelector" id="myColorPicker">
    <div style="background-color: <?=$selectedColor?>"></div>
</div>
<script type="text/javascript">
   jQuery(document).ready(function($){
       jQuery('#myColorPicker').ColorPicker({
       color: '<?=$selectedColor?>',
           onShow: function(colpkr) {
               jQuery(colpkr).fadeIn(500);
               return false;
               },
           onHide: function(colpkr) {
               jQuery(colpkr).fadeOut(500);
               return false;
               },
           onChange: function (hsb, hex, rgb) {
               jQuery('#myColorPicker div').css('backgroundColor', '#' + hex);
               jQuery('#myColor').val('#' + hex);
           }
       });
  });
</script>

If you're adding it to a dialog, add more z-index to the colorpicker.

.colorpicker, .colorpicker * {
    z-index: 9999;
}

edited Feb 16 '11 at 19:24

answered Feb 16 '11 at 18:27

Benjamin Intal

2,748
1
25
26

It is not really a lightbox, are you not familiar with [jQuery UI](http://jqueryui.com/demos/dialog/)? I also gave the code I use above for your reference, perhaps I am not using colorPicker very well. – Yottagray Feb 16 '11 at 18:51
Really haven't had any use for jQuery dialog yet :) The code I gave though works with inputs for sure, and if z ordering is concerned it may be just CSS you have to worry about. – Benjamin Intal Feb 16 '11 at 19:02
I tried what you said above like this: .colorpicker, .colorpicker * {z-index: 1001;} but it doesn't work. Am I using it wrong? – Yottagray Feb 16 '11 at 19:11
Okay I edited my answer. You just needed a bit more index lol! Works in mine now – Benjamin Intal Feb 16 '11 at 19:25
Still can't get mine to work. Try putting your code inside of a [dialog](http://jqueryui.com/demos/dialog/) and see if it still works, I'm pretty sure that's what is causing my problem. – Yottagray Feb 16 '11 at 21:13
I used your code instead of the one I provided plus the CSS rule I gave. Try it – Benjamin Intal Feb 17 '11 at 14:14

jQuery Color-picker z-axis problem

1 Answers1

Linked