Issue #2522💬 RespondidoAbierto el 22 de enero de 2020por jcamejoReacciones 2

Advertencia sobre cómo ajustar la altura del envoltorio al 100%

Respuesta rápidapor artf1

Hola Juan, gracias por todos los detalles, pronto voy a fusionar una gran refactorización del lienzo y veré si podemos arreglarlo (por ejemplo, adjuntar la referencia de scroll al envoltorio).

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf espero que todo vaya bien.

Esto es más bien un recordatorio o un mensaje de advertencia sobre un problema que acabo de tener y que me llevó un tiempo resolver.

Si la altura del envoltorio (modificada por el selector #wrapper por defecto) está configurada como 'altura: 100%' en lugar de 'altura-mínima: 100%', el contenedor de herramientas del editor adoptará un comportamiento no deseado.

! demo

Esto ocurre porque el evento de desplazamiento no será activado por el objeto ventana, sino por el elemento envoltorio, lo que hace que el 'onFrameScroll' no se active en CanvasView.

El OnFrameScroll se asigna en la función renderBody.

...
      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();
...

¿Debería escribirse esta advertencia en algún lugar del código? Quizá en el archivo de configuración del editor donde está configurado el baseCSS, junto con los comentarios que tienes ahí.

¿Qué opinas?

¡Gracias!

Respuestas (3)

artf23 de enero de 2020

Hola Juan, gracias por todos los detalles, pronto voy a fusionar una gran refactorización del lienzo y veré si podemos arreglarlo (por ejemplo, adjuntar la referencia de scroll al envoltorio).

artf21 de mayo de 2021

Gracias por recordarme@bgrand en realidad se me había olvidado este problema 😬 Se arreglará en la próxima versión.

jcamejo24 de enero de 2020

Me alegra oírlo, espero que la refactorización ayude a solucionar el problema.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.