Issue #596✓ SolvedOpened November 30, 2017by TrungPham3839 reactions

Color picker displays wrong position

快速解答by fguslinski8

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.

Read full answer below ↓

Question

add

Answers (3)

👍 Most helpfulfguslinskiAugust 22, 2018

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.

swarnatJuly 6, 2018

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.

artfDecember 1, 2017

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.