overflow problem when inside popup

[tarlepp]

Hi I just started to using this awesome component in my application. I noticed that component doesn't work correctly with modals, screenshot below

I would be very happy if you could fix this.

[evoluteur]

Hi,

Thanks for letting me know.
Can you try increasing the z-index of .evo-pop and .evo-pop-ie in evol.colorpicker.css.

thanks,
Olivier

[tarlepp]

No help because colorpicker container is inside the modal dialog.

[tarlepp]

any info for this?

[evoluteur]

Sorry but I can't find the time to fix it right now.

[tarlepp]

:(

[bago]

The only way to fix this is to put the colorpicker popup in the body instead of "inline" and then position it absolutely near the textfield... it is a PITA because you then start having scrolling issues and much more browser specific issues.

[deneektolentino]

i added a css so that it appears on top instead of the bottom, its not a real fix but it would to for now

.evo-pop {
    bottom: 0;
}

although it would only be useful if the color input box is at the bottom part of the dialog modal.

[tarlepp]

So it this fixed now?

[evoluteur]

Sorry, no, it's not fixed but I decided not to fix it.
It's not trivial and outside of the normal usage.

[tarlepp]

ok, thanks for that info need to find another library for this :(

[Kenneth-Chan]

This is a workaround bandage solution only. You can modify the following functions in evol.colorpicker.js source code. Perhaps, you can try converting it a prototype or extend function without changing the source code.
_create: function() {
..............................
// change the following code to pass the evt to show palette
if(showOn==='both' || showOn==='button'){
e.next().on('click', function(evt){
evt.stopPropagation();
that.showPalette(evt);
});
}
}
}
....................

  showPalette: function (e) {       
    if(this._enabled){
        this._active=true;
        $('.colorPicker').not('.'+this._id).colorpicker('hidePalette');
        if(this._palette===null){
            this._palette = $('#YOUR_DIALOG_DIV_ID')                                        
                .after(this._paletteHTML()).next()
                .css({ top: e.clientY + 'px', left: e.clientX + 'px', position: 'absolute' })
                .on('click',function(evt){
                    evt.stopPropagation();
                });
            this._bindColors();
            var that=this;
            if(this._isPopup){
                $(document.body).on('click.'+that._id, function(evt){
                    if(evt.target!=that.element.get(0)){
                        that.hidePalette();
                    }
                }).on('keyup.'+that._id, function(evt){
                    if(evt.keyCode===27){
                        that.hidePalette();
                    }
                });
            }
        }
    }
    return this;
},

[tarlepp]

@Kenneth-Chan nice one, you should make a PR about this with extra option appendToBody: true which changes behaviour to this.