Issue #5885๐Ÿ’ฌ AnsweredOpened May 14, 2024by vincepv1 reactions

On fullscreen, color picker is hidden

Quick answerby vincepvโค 1

Issue solved. I find a solution. When I init grapejs, I pass object config with colorPicker const config = { container: '#editor', fromElement: true, // other config options here colorPicker: { appendTo: 'parent', offset: { top: 26, left: -166, }, } }

Read full answer below โ†“

Question

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefoxe 125.0.3 (64 bits) Reproducible demo link https://grapesjs.com/demo-newsletter-editor.html Describe the bug How to reproduce the bug?install latest version of grapejsclick on fullscreen select a text or block with color propertyclick on Open Style Managerclick on color picker You can reproduce here : https://grapesjs.com/demo-newsletter-editor.html What is the expected behavior? on click, color picker should open. What is the current behavior? color picker is always hidden in fullscreen. H...

Answers (3)

vincepvโ€ข May 17, 2024

Issue solved. I find a solution. When I init grapejs, I pass object config with colorPicker const config = { container: '#editor', fromElement: true, // other config options here colorPicker: { appendTo: 'parent', offset: { top: 26, left: -166, }, } }

artfโ€ข May 20, 2024

Thank @vincepv yeah there might be some conflicts with the fullscreen command and the default configuration of the color picker depending on how and where the editor container is rendered. Probably, in most of cases, it would be enough to place the color picker in the same editor container to make...

GJS Helperโ€ข May 17, 2026

The issue you're encountering, where the color picker is hidden when GrapesJS is in fullscreen mode, is a common problem related to stacking contexts and how fullscreen elements are rendered. It's not a bug in the color picker itself, but rather a conflict in how different elements are layered on t...

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 โ†’

Related tutorials

In-depth guides on the same topic.

All tutorials โ†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.