Grid Component Resize Its cells width not works
This is because the grid uses flex so you should use flex-basis for the width. In that case resizable should be an object like this { keyWidth: 'flex-basis' }
Read full answer below ↓Question
Hi artf, i have a question when i implement grid component having row and three cells , i want to make these cells resiazable on width and height , So i make an event when component selected set it resizable =true , when resize cells height it works , but the cells width not affect yet when resize it , how i can make cells resizable. this is my code :
blockmanager.add('my-grid', {
label: 'Grid',
category: 'Basic',
content: '<div title= "grid" class="row" style="height:50px; border-width:0px"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>',
attributes: {class:'gjs-fonts gjs-f-b3 gjs-block gjs-one-bg gjs-four-color-h'},
style:{
'width': '33vw',
} });
and the event is :
editor.on('component:selected', function (args) {
args.attributes.resizable = true;
});Answers (2)
This is because the grid uses flex so you should use flex-basis for the width. In that case resizable should be an object like this { keyWidth: 'flex-basis' }
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #599
Set Device Height along with Device Width
Hi I want to add new devices with both width and height, Is there any way I can do this? An other issue is that when I give width of device...
Issue #1255
[QUESTION]: How to set editor html contents from custom component?
I'm having trouble getting a custom block+component to display its template HTML inside the grapes editor. Within the exported HTML, the ma...
Issue #1882
[QUESTION] Dynamically changing Trait Properties
Hi, I went through the other questions posted here and could not get it to work. All I need to do is to access a specific trait of a specif...
Issue #1814
[Question]: How to fire event which triggers component:selected with my component
I want to select my component whenever it is dragged from blocks to canvas and rendered, I have tried with registering events on component:...
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.