Hi, If you for example add a 3 column block to a page, and try dragging a very wide image into each column, the content stretches and the overflow is hidden. How do we either add a vertical scrollbar or force the editor to limit the viewable size of images when dragged in. Currently if the content goes outside that ar...
artf
This is more a layout issue that you can easily fix by adding your CSS to all images, eg. img { max-width: 100%; }
GJSBlock
Thanks for reporting this, @samichamoun. Great question about Large images make area of content editor unreachable. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for you...
Just as a preface, the issue I'm describing does not affect the output of content generated by the editor, it is just when looking at the content within the editor. Let's say I create two columns on the editor. Both are 50% width each. If I drag a large image into one of these cells, it pushes the width of the cell ou...
GJSBlock
Thanks for reporting this, @samichamoun. Great question about Large images push out column width in editor view. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your s...
Hello, right now grapesjs provides built in properties like margin, padding that allow user to change each property one by one (margin-top, margin-bottom, etc). It would be nice to have ability to change all these properties together. To have some lock button, for example, when it's enabled it will change all properti...
artf
Yeah, that would be cool, but unfortunately, GrapesJS doesn't have yet the proper UI module which could allow easily to build new UI components by reusing others, so StyleManager.addType is the only way but in that case, it's up to you bui...
GJSBlock
Thanks for reporting this, @kuhelbeher. Great suggestion about FEAT: Ability to change all margin, padding etc properties together! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior....
Consider a simple block: When dragged to canvas, this component can be selected and it's possible to modify its settings. Now, i'm doing this, to add the same input in a card: $(someElement).find(".card").html('<input type="text"/>'); The input is added successfully but doesn't behave as it did before. It can't be sel...
GJSBlock
Thanks for reporting this, @ahmedderkaoui. Great question about Element injected as HTML to canvas doesn't behave as a component. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS doc...
Hello @artf , Many Many Thanks for previous help. I am fresher in development. Please help me with below I need a modal where I will get user input Like Block Name, Category, HTML, CSS, JS then click on save to store that as new block manager. Mean how to pass those data and store them as dragabe component I have made...
artf
Please follow the issue template
GJSBlock
Thanks for reporting this, @Palash-Mandal. Great question about *. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event lis...
Hello @artf I having issue with a traits. When I drag and drop the block to canvas it's traits showing fine in under settings section. but when I saved and edit the in 2nd time and selected that tag in canvas that traits is now populating in setting Section. Please Please Please HELP!. `// Custom Heading Component blo...
artf
Are you defining your custom component in a plugin?
Palash-Mandal
Are you defining your custom component in a plugin? No. Just Add in init function editor = grapesjs.init({ const dc = editor.DomComponents; // Custom Heading Component blockManager.add('header', { label: 'Headings', category: 'Components',...
artf
The first rule of defining new component types is to place the code inside a plugin. From docs
I've noticed if in the initialise function I set a height it will set based on a specific pixel amount e.g. height: "500px". However if you try to set with a percentage e.g. height: "90%" the editor has no height at all. Also I'm wondering what is setting the height if nothing is set because it appears to be automatic...
ahmedderkaoui
try to work with vh instead of px. eg: give the editor height: '80vh', your navbar height: '20vh'. This way, the vertical scroll will never be shown or needed as long as the sum of all elements's vh β€ 100 Hope this helps.
samichamoun
try to work with vh instead of px.eg: give the editor height: '80vh', your navbar height: '20vh'. This way, the vertical scroll will never be shown or needed as long as the sum of all elements's vh β€ 100Hope this helps. thanks this is usef...
artf
This is more a layout issue and not related to the GrapesJS editor itself.
Thanks for reporting this, @palash-zinfi. Thanks for sharing your report about test post. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your GrapesJS version number...
Some of the css was not working properly for example the .gjs-cv-canvas was not working. This is the screenshot of my grapejs page in nextjs
GJSBlock
Thanks for reporting this, @eyroooon. Thanks for sharing your report about Using GrapeJS on nextjs. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your GrapesJS versi...