Issue #2834✓ SolvedOpened June 16, 2020by kuhelbeher6 reactions

Grapesjs doesn't initialize styles for wrapper

快速解答by bryanjamesmiller3

This seems to fix the issue: Any reason not to do this @artf ?

Read full answer below ↓

Question

Hello, I've met a bug where grapesjs doesn't initialize styles for wrapper. Steps to reproduce:

  1. Go to https://grapesjs.com/demo.html
  2. Select wrapper and set background. It will add "body" rule to styles and it will be displayed in style settings
  3. Refresh the page - "body" rule still present (you can check it in "View Code" modal) but it didn't applied to the wrapper simplescreenrecorder-2020-06-16_15 23 25

Also it is causes in my project similar problem to this - https://github.com/artf/grapesjs/issues/2231

Answers (3)

👍 Most helpfulbryanjamesmillerJune 20, 2022

This seems to fix the issue:

const wrapper = editor.getWrapper();
wrapper.set('attributes', { id: 'grapes-iframe-body' });

Any reason not to do this @artf ?

JowceySeptember 29, 2023

Hey, this issue is still persisting. The Classes and CSS added to the body layer (wrapper) get wiped every time it's restarted. It seems to be that the ID get's randomised and that's why the CSS breaks, but unsure why the class gets cleared.

aakash2610March 31, 2022

I am facing the same issue. Is there any workaround for this issue suggested by grapesjs team? Meanwhile, is there any timeline for fixing this issue?

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.