Resize by class :(
@ramusesan @edwinjoel1984 your issues is because of the shared selectors. similar issue here. for the solution i suggest this thread. cheers!
Read full answer below ↓Question
The main problem that i have is I'm trying to do a resize in a component that I made, but if I have Two Components equals, when I do the resize one of them the other do the same resize. So, I think that I would need manage the style of them by id and not by class.
This is my code:
`const buttonComponent = {
name: "button-bk",
data: {
id: "button",
label: `Button`,
category: "Basic Components",
draggable: true,
content: `<button class="btn-builder" data-gjs-draggable=".cell" data-gjs-resizable='{"tl":0,"tc":0,"tr":0,"cl":0,"cr":1,"bl":0,"br":0,"minDim":1,"bc":0,"currentUnit":1,"step":0.2}' data-gjs-name="Button">Send</button>`,
},
};
editor.BlockManager.add('button', buttonComponent);
`
View Example https://cl.ly/c4bfaf626adc
_Originally posted by @edwinjoel1984 in https://github.com/artf/grapesjs/issues/2435#issuecomment-560447001_Answers (3)
@artf this is the problem
even i am facing the same issue its probably issue with precedence, assume incase i have an id and class for the same element
i.e <table id="myId" class="myClass"> ..... </table>
and trying to resize a table then styles are applying on .myClass not #myId
why class taking more precedence than id
how to fix
live demo here : https://stackblitz.com/edit/react-mcv9vz
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1030
[Question] Firing events with custom components
I'm trying to build a plugin for Grapesjs with some custom components, and I'm having trouble with triggering events and interacting with t...
Issue #3639
[Feature]: Improve UndoManager API
One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history repo...
Issue #3219
Add Type for block and css with class name
Hi @artf I am stuck on one thing I want to add one block in which I want to add style with the class name also Here is my code -: This give...
Issue #713
Restrict Droppable Components to specific Component Types
So the wording of this may seem confusing, but essentially I'm trying to use gjs-droppable="" the same way one would use gjs-draggable=""....
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.
Tutorial
Best GrapesJS Plugins in 2025 (Updated List)
Discover the top free and premium GrapesJS plugins in 2025 — boost your editor with UI kits, Tailwind blocks, AI tools, and advanced page managers.
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.