I'm using the excellent jQuery color picker from

It works correctly under "normal" circumstances but doesn't show the picker when the input parent element is found within a Bootstrap 3 modal.

This works:

<div class="container">
  <div class="row">
    <div class="col-md-6">
        <input type="text" id="colorPick1" class="colorPick"/>
    </div>
  </div>
</div>

But the same thing inside a Bootstrap modal fails to show the picker:

<div class="modal-body">
    <div class="row">
        <div class="col-md-6">
            <input type="text" id="colorPick2" class="colorPick"/>
        </div>
    </div>
</div>

Is there a way to use this color picker within a Bootstrap modal?

Thanks

I'm using the excellent jQuery color picker from http://colpick./plugin

It works correctly under "normal" circumstances but doesn't show the picker when the input parent element is found within a Bootstrap 3 modal.

This works:

<div class="container">
  <div class="row">
    <div class="col-md-6">
        <input type="text" id="colorPick1" class="colorPick"/>
    </div>
  </div>
</div>

But the same thing inside a Bootstrap modal fails to show the picker:

<div class="modal-body">
    <div class="row">
        <div class="col-md-6">
            <input type="text" id="colorPick2" class="colorPick"/>
        </div>
    </div>
</div>

Is there a way to use this color picker within a Bootstrap modal?

Thanks

• javascript
• jquery
• css
• twitter-bootstrap-3

1 Answer 1

The problem is z-index just add this line in your css class it works good..

.colpick {
  z-index: 9999;
}

Jsfiddle DEMO