BUG: on fullscreen, color picker is hidden

[vincepv]

GrapesJS version

• 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?

1. install latest version of grapejs
2. click on fullscreen
3. select a text or block with color property
4. click on Open Style Manager
5. click 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.

Hypothesis
I try to change CSS rules with z-index. I failed to solve the issue.

Stack of my front-end project
"vue": "^3.4.15",
"grapesjs": "^0.21.10",
"grapesjs-mjml": "^1.0.5",

Code of Conduct

• I agree to follow this project's Code of Conduct

[vincepv]

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]

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 them work properly.

grapesjs.init({
  container: '#gjs',
  colorPicker: { appendTo: '#gjs' },
 // ...
})