Issue #1531Opened October 19, 2018by alfaalex810 reactions

[Question] Css class

Question

Hi! Probably this problem is already posted, but I can't understand where I'm wrong. I use this three parameters on init GrapesJs.

                protectedCss: '',
                avoidInlineStyle: true,
                forceClass: true,

I would like GrapeJs not to edit preexisting css, but only creates its own. Is it possible?

Thank you!

Answers (3)

alfaalex81October 22, 20180 reactions

For example i have this code on canvas

<div class="row">
    <div class="col-md-6" style="min-height: 50px"></div>
    <div class="col-md-6" style="min-height: 50px"></div>
</div>

GrapesJs add to CSS this class

.col-md-6 {
	min-height:  50px;
}

This rule modify all element with this class, this is a generic bootstrap class that we use in all site.

artfOctober 29, 20180 reactions

@alfaalex81 I can't reproduce it, create a live demo please

alfaalex81October 30, 20180 reactions

https://jsfiddle.net/ugc1otnk/

In the example when i change background color in the first column, GrapesJs set the css attribute to the external class "col-md-6", that is a bootstrap class name. I prefer Grapesjs set own class.

Moreover I think I've found a bug. Select the first column and deselect class "col-md-6" on the stylee manager panel, class name "example" appears but this class is associated in the second column. It is only a visual bug.

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.