Warning on setting up wrapper's height to 100%
Hi Juan, thank you for all the details, I'm going to merge soon a big canvas refactoring and will see if we can fix it (eg. attaching scroll callback to the wrapper)
Read full answer below ↓Question
Hi @artf I hope everything's going well.
This is more like a reminder or a warning message for an issue I've just had that it took me some time to figure out.
if the wrapper's height (modified by the selector #wrapper by default) is set to height: 100%; instead of min-height: 100%, the editor's tool container will take a non desirable behavior.

This happens because the scroll event will not be triggered by the window object but rather the wrapper element, this causes the onFrameScroll not to be fired in the CanvasView.
The OnFrameScroll is assigned in the renderBody function.
...
body.append('<style>' + frameCss + '</style>');
body.append(wrap.render()).append(cssc.render());
body.append(this.getJsContainer());
em.trigger('loaded');
**this.frame.el.contentWindow.onscroll = this.onFrameScroll;**
this.frame.updateOffset();
...
Should this warning be written somewhere in the code? Maybe in the editor configuration file where the baseCSS is set, along with the comments you have there.
What do you think?
Thanks!
Answers (3)
Hi Juan, thank you for all the details, I'm going to merge soon a big canvas refactoring and will see if we can fix it (eg. attaching scroll callback to the wrapper)
Thanks for the reminder @bgrand-ch I actually forgot about this issue 😬 Will be fixed in the next release.
Glad to hear it, i hope the refactoring helps to fix the issue.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1346
[FEATURE REQUEST] Property slider view default unit
Hey @artf , I think that the slider component would come handy from the UX perspective for the user interaction of some of the integer prop...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Issue #3700
setting draggable: 'wrapper' does not drop in wrapper
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
Issue #3480
How to control the height of the editor dynamically to avoid clunky scrolling
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...
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
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
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.