Color picker displays wrong position

Hi there, I solved this using the following configuration:

grapesjs.init({ colorPicker: { appendTo: 'parent', offset: { top: 26, left: -166, }, }, })

Maybe you need to adjust the top and left positions for you, because I changed some sizes. But works perfect here.

I had exactly the same problem and thanks to your pointer to ColorPicker.js I was able to fix.

Like artf say, the calculation of position is wrong, when editor is shown with a popup, like bootstrap modal. So I replaced the correction lines here like this:

offset.left -= Math.min(
      offset.left,
      offset.left + dpWidth > viewWidth && viewWidth > dpWidth
        ? Math.abs(offset.left + dpWidth - viewWidth)
        : 0
);

offset.top -= Math.min(
      offset.top,
      offset.top + dpHeight > viewHeight && viewHeight > dpHeight
        ? Math.abs(dpHeight + inputHeight - extraY)
        : extraY
);

to a simple

    offset.left += input.outerWidth();
    offset.left -= input.closest(".gjs-editor").offset().left;
    offset.left -= dpWidth;

    offset.top += inputHeight;
    offset.top -= input.closest(".gjs-editor").offset().top;

This works perfect for me, because I took input offset and subtract the offset of popup and datepicker. to more.

I only don't create a Merge request, because I think it isn't the best way to handle this. Also the top position must better recognize browser borders. I will try to optimize the change and create some full page test cases over weekend, because I love this editor. There is also probably a default way to get container element, which I oversee during code research.

Are you able to provide a live example of the issue? (jsfiddle, codepen, etc..)