Problema con la colocación de elementos en una disposición de varias columnas
Puedes añadir esto a 'pluginOpts' dentro de 'grapesjs.init': '''js const editor = grapesjs.init({ // ... pluginsOpts: { "gjs-blocks-basic": { prefijo style: '', // no gjs- prefijo flexGrid: 1 // usar flexbox en lugar de tablas } }, // ... }); ``` Esto probablemente también solucionará tus problemas de alineación anter...
Lee la respuesta completa abajo ↓Pregunta
¿Cómo controlar la posición de los elementos en las celdas de las columnas? A la izquierda tengo el elemento de mapa, y a la derecha, Texto e Imagen. Como se ve en la captura de pantalla de abajo, los elementos de la derecha están situados después del mapa.
Un problema similar también está en este] (https://codepen.io/artf/pen/MQpZPj) bolígrafo (Grapesjs Custom UI by @artf). ! Captura de pantalla (177)
Respuestas (3)
Puedes añadir esto a 'pluginOpts' dentro de 'grapesjs.init':
'''js const editor = grapesjs.init({ // ... pluginsOpts: { "gjs-blocks-basic": { prefijo style: '', // no gjs- prefijo flexGrid: 1 // usar flexbox en lugar de tablas } }, // ... });
Esto probablemente también solucionará tus problemas de alineación anteriores y es mucho mejor para un diseño responsivo
@theSC0RP Esto no es realmente un problema de GrapesJS en sí. La celda en GrapesJS tiene '''css pantalla:table-celda;
propiedad, así que intenta simular la disposición de una tabla, que yo sepa. Así que si quieres cambiar la posición, busca la manera de cambiar verticalmente la posición en una tabla.
Una solución podría ser
'''css
alineación vertical:centro;
Véase https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Así que aplicarías esto automáticamente en tu componente personalizado o podrías crear una propiedad de estilo personalizada para esta configuración, para poder cambiarla fácilmente. Puede que haya otras formas de alinear un elemento en una disposición de tabla. Alternativamente, también puedes crear tu propio componente de diseño personalizado, que puede comportarse como quieras.
@MartinPutz Gracias por la respuesta. ¿Cómo podría crear y aplicar una propiedad de estilo personalizada en la celda? Estoy usando el plugin grapesjs-blocks-basic para que la celda tenga el nombre de clase 'gjs-cell'. Intenté añadir la propiedad sugerida en esta clase en mi archivo de estilos, pero el problema sigue ahí.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3374
Las imágenes y vídeos no están enfocados
Hola, tengo un problema que es que al añadir un vídeo o una imagen al lienzo, no está centrado, sino hacia la izquierda. Con la ayuda del p...
Issue #3089
Problema con el diseño responsivo.
Cuando cambio a la vista móvil, los elementos en la pantalla simplemente se apretan. (Estoy usando el plugin grapesjs-blocks-basic) En las...
Issue #1338
El modo de elemento especificado no está compatible con elementos: "a" y CKE config
@artf hay un problema con el CKE y las uvas. Ve a tu demo de Newsletter, haz doble clic en el texto de un botón y comprueba el inspector. E...
Issue #5286
Borde de imágenes y algunos elementos en la posición incorrecta
En pantallas de portátiles más pequeñas (como los MacBook, por ejemplo), el borde de las imágenes y algunos elementos están en una posición...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.