Advertencia sobre cómo ajustar la altura del envoltorio al 100%
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)
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).
Gracias por recordarme@bgrand en realidad se me había olvidado este problema 😬 Se arreglará en la próxima versión.
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.
Issue #1346
[SOLICITUD DE FUNCIÓN] Unidad por defecto de vista deslizante de propiedades
Hola @artf, Creo que el componente deslizante sería útil desde la perspectiva de la experiencia de usuario para la interacción del usuario...
Issue #1767
Asegúrate de que getHtml() / runCommand("gjs-get-inlined-html") devuelva el contenido más reciente del lienzo
Hola @artf, Me encontré con un problema similar, si no el mismo, que este: #1327 Mientras edito un bloque de texto, hago clic en un botón e...
Issue #668
Cuando no esté disponible seleccionar un elemento, sugiere pasar el cursor y hacer clic en evento seleccionará el padre disponible.
Hola @artf, ¿puedo tener una mejora para el comando de selección? Cuando el cursor haga clic o pase el cursor sobre el elemento que no es s...
Issue #1516
CKEDITOR 5 [Mejora]
Hola @artf, Como se describe en la siguiente tarea, hice una compilación del ckeditor 5 que funciona con GrapesJS, aunque algunas funcional...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.
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
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.