Issue #2522💬 AnsweredOpened January 22, 2020by jcamejo2 reactions

Warning on setting up wrapper's height to 100%

快速解答by artf1

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.

demo

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)

artfJanuary 23, 2020

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)

artfMay 21, 2021

Thanks for the reminder @bgrand-ch I actually forgot about this issue 😬 Will be fixed in the next release.

jcamejoJanuary 24, 2020

Glad to hear it, i hope the refactoring helps to fix the issue.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.