BUG: Loading initial project data from a designer-mode project results in wrong canvas size
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome v103
Reproducible demo link
https://codesandbox.io/s/laughing-austin-k12mc3?file=/index.js
Describe the bug
If you view the linked CodeSandbox and find the commented out line providing the projectData to the editor, you will see that the canvas gets resized away from the size specified by the device. In a debugger, it seems that updateDim is called multiple times at initialization: the first time with the correct device size and then again with empty width and height which then leads to the gjs-frame-wrapper's sizing getting removed.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
I can kinda force it to the correct canvas size by:
- Not providing projectData in the initial config,
- Loading the projectData via
editor.loadProjectData(...)after initialization and - Then running
editor.Canvas.getModel().updateDevice();though it animates from the full width back to device size.
It seems that loading the project data happens after the default device is rendered (maybe?) and somehow blows out the current frame, rerendering some default. (I don't know what the default is since I'm only providing a single device config, which appears to be ignored on the second render).
Also, leaving out any one of the three steps above results in the full-width canvas instead of the correct narrow canvas
Thanks @contentfree I'll try to fix that for the next release
Thanks @artf. I'll keep my eye open for the next release (looks like your kanban board is empty now … so should be imminent?)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5019
BUG: Can't set preview mode on editor init when using loadProjectData()
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v111 Reproducible demo link https:/...
Issue #3806
BUG: Target :null when adding video
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome new version Reproducible demo link...
Issue #5207
BUG: Duplicated CSS while multi page creation
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome latest Reproducible demo link https...
Issue #4654
BUG: Custom component for text node including special characters
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v105 Reproducible demo link https:/...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.