Changing CSS properties on a component with an existing class modifies that class instead of adding a new one
I was thinking that the behaviour could be something like this: Default (current setup):If element has no classes, create unique class based on cid and apply stylesIf element has classes, apply styles to the union of those classes (or whatever classes are selected in the UI) Toggled behaviourTest if element has an exi...
Read full answer below ↓Question
You can see this in action on the demo (http://grapesjs.com/demo.html). Select one of the nav items ('Web' for example) - note that it has an existing class of menu-item. If you now change some of the properties, such as text alignment, it applies those changes to the menu-item class, which affects the other instances ('Template', 'Builder'). Is it possible to force GrapesJS to apply a new 'unique' class and apply the changes there - similar to how it works if you make changes to a component with no existing classes (c1234 for example)? Ultimately I want any Style changes to only apply to the...
Answers (3)
I was thinking that the behaviour could be something like this: Default (current setup):If element has no classes, create unique class based on cid and apply stylesIf element has classes, apply styles to the union of those classes (or whatever classes are selected in the UI) Toggled behaviourTest i...
Hi @thecodefish what do you think about this approach? https://codepen.io/artf/pen/jaaKvq You will see there how to make selectors private (not stylable by the user) and the usage of the new avoidInlineStyle option which allows you to style components (not class selectors) without losing the respon...
I'd say you have 2 options:
- Just deselect the class, in this case, the style manager scope will change to the component and not the rule
- Add a new class to the component, instead of
.menu-itemrule you will get.menu-item.your-new-class
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3663
Default styling properties are not being re-selected when switiching devices
Hi, Default styling properties are not being selected when switching devices. Steps to reproduce: Open [http://grapesjs.com/demo.html] Sele...
Issue #3447
javascripts are not working due to encoding issue
1 - I copied Typed text components code instead of demo HTML code; 2 - And added allowScripts: 1; You can see example here: http://bashworl...
Issue #1842
Showing two times some properties and not showing some options too.
Hello, @artf @NicoEngler, I have one strange issues. I am using grapes.js and grapes.min.css with version of 0.14.50. While i am selecting...
Issue #463
Is the video component on the webpage demo working?
I wanted to study how to use the video component but the one on the demo website (http://grapesjs.com/demo.html) doesn't seem to be working...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.