Issue #5331💬 AnsweredOpened August 24, 2023by rozek0 reactions

Color picker may extend viewport

Quick answerby artf

Thanks @rozek the PR is always welcome, so I'll be happy to review it.

Read full answer below ↓

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64)

Reproducible demo link

none

Describe the bug

This bug is similar to issue #596 which has been locked because of a lack of conversation. This version may provide a fix for the current version of GrapesJS.

How to reproduce the bug?

When opening a color picker close to the edges of the viewport, that picker may only partially be visible <img width="329" alt="Screenshot-of-Bug" src="https://github.com/GrapesJS/grapesjs/assets/514882/9300e2d5-f2ce-484e-8543-aaccf9d90bde">

Unfortunately, the fix mentioned in #596 does no longer work. Thus, I looked into the current code and replaced lines 1002...1012 of file src/utils/ColorPicker.ts by

    offset.top += inputHeight;             // place "picker" right below "input"

    if (offset.left + dpWidth > viewWidth) {   // "picker" would extend viewport
      offset.left = viewWidth-dpWidth
    }
    
    if (offset.top + dpHeight > viewHeight) {  // "picker" would extend viewport
      offset.top = viewHeight-dpHeight
    }
        
    // nota bene: "picker" is placed relative to the editor!
    var EditorOffset = picker.closest('.gjs-editor-cont').offset()

    offset.left = Math.max(0,offset.left - EditorOffset.left)
    offset.top  = Math.max(0,offset.top  - EditorOffset.top)

(and also deleted line 988 which is useless)

The result now works on my machine:

You may inspect these changes in my own fork of GrapesJS

Since I'm new to GrapesJS, I'm a little reluctant to do a PR right now. However, if you expect these changes to work on all other machines as well, I would be proud to do so.

With greetings from Germany,

Andreas Rozek

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (3)

artf• August 25, 2023

Thanks @rozek the PR is always welcome, so I'll be happy to review it.

artf• December 10, 2023

Closing for now as it doesn't seem to be reproducible

ClaudeCode• May 17, 2026

Thanks for reporting this, @rozek.

Great question about color picker may extend viewport. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

Check the GrapesJS documentation for your specific module
Look for the on() event listener method
Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

Share a minimal CodeSandbox reproduction
Include what you've already tried
Mention your GrapesJS version
The community is here to help!

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Color picker may extend viewport

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (3)

Related Questions and Answers

draggable/droppable property functions not called while dragging

cannot "sort" elements of layer panel

canvas.script entries do not respect an "import map"

canvas.script entries can not be JS modules

Paid Plugins That Match This Issue

Related tutorials

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

Browse Plugin Categories