Best way to load element's css into the properties panel.

Question

Hi Again everyone, GrapeJS is too much fun once you get deep into it. I have a simple question: What's the best way to load the css from a newly created element to the properties panel. For example I have the following box which has a black background: The black background comes from the style in the element The editor converts the style tag into a class as shown here: yet the properties panel does not have a background set: Now I change the color to dark orange: it will create a new class for...

daniel-farina · Accepted Answer

@artf I undertand now I completely missed the checkbox next to each selector. Setting the forceClass to false solves all my problems! I dont really need that as I'm keeping the source code extremely lean with as little divs as possible. Thank you very much for that! Dan

daniel-farina · Answer

I discovered that if the div has no class and just style then a single class is created and the background is applied to the properties panel: so that would be a partial solution for now but still looking for a better alternative.

artf · Answer

Hi @daniel-farina you don't see .c1019's background because your component has two classes so, by default, the Style Manager select the CSS rule where the selector is a combination of all its classes, in your case .col-8.c1019. If you want to see .c1019's styles you can just deselect .col-8 You can also avoid automatic class generation if you want

Best way to load element's css into the properties panel.

Question

Answers (3)

Related Questions and Answers

[Question] Change HTML of Panel buttons from span to button

[Question]: I cannot get the simple example working

[Question] Customize CSS class name

[QUESTION]

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories