WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Is there a way to make wordpress default color picker (iris) showed up over form and text using wordpress api?

Its inline display messing up the administration page of my plugin each time the color picker box showed up.

share|improve this question
Show the relevant parts of your code. – brasofilo Sep 15 '13 at 10:23
Screenshot might be in order as well when dealing with display issues. – Rarst Sep 15 '13 at 11:32

I found the answer.

SO, there is no need to use wordpress api to make the color picker box showed up over another elemnn/s when the 'Select color' button is clicked.

Just add this css code to your plugin/ theme administration css file:

div.wp-picker-holder {
z-index: 999 !important;
position: absolute !important;
share|improve this answer

Here's the full documentation on Iris. There you can see that you can set a "target" for where the actual pallette appears with a DOM element.

Here's a sample code:

Your JS:

target: '#colorpickertarget'


<input class="color-picker" type="text" />
<input type="submit"></form>
<div id="colorpickertarget"></div>
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.