Gjs-css-rules ordenación inválida
¡Lo siento! Así que cuando el atributo mediaCondition está en el ancho mínimo en la configuración del editor, necesitamos ordenar gjs-css-rules en el renderizado para obtener el buen orden en el editor CssRulesView.js -> después de la línea 126 -> prs.sort() si es móvil primero Gracias Adiós Flo.
Lee la respuesta completa abajo ↓Pregunta
Hola,
En la última versión 0.15.10, tenemos un problema con el generador de CSS. Los dispositivos están configurados de la siguiente manera: '''javascript mediaCondition: 'max-width', deviceManager: { Dispositivos: [ { Nombre: 'Pequeño', Ancho: '40em', }, { Nombre: 'Medium', Ancho: '64em', }, { Nombre: 'Grande', } ] },
Cuando añado una regla como el color de fondo, en el CSS real tengo
'''html
<style>
@media (ancho máximo: 40em)
.id-USR-ix0a {
Color de fondo: #ff0000;
}
@media (ancho máximo: 64em)
.id-USR-ix0a {
Color de fondo: #828282;
}
.id-USR-ix0a {
color de fondo: #000000;
}
</style>
Este orden es perfecto. Pero en el estilo javascript (para editor) sí
'''html
<div id="gjs-css-rules"></div> <div id="gjs-css-rules-40"></div> <div id="gjs-css-rules-64"></div> ``` Así que mi resultado CSS en editor es '''html <style> @media (ancho máximo: 64em) .id-USR-ix0a { Color de fondo: #828282; }@media (ancho máximo: 40em) .id-USR-ix0a { Color de fondo: #ff0000; }
.id-USR-ix0a { color de fondo: #000000; } </style>
Y el estilo por debajo de 40 es el 64em...
¿Tienes alguna idea de la corrección?
¡Muchas gracias!
Flo.
Respuestas (2)
¡Lo siento!
Así que cuando el atributo mediaCondition está en el ancho mínimo en la configuración del editor, necesitamos ordenar gjs-css-rules en el renderizado para obtener el buen orden en el editor
CssRulesView.js -> después de la línea 126 -> prs.sort() si es móvil primero
Gracias Adiós Flo.
Puedes usar la propiedad 'priority' en la definición de tu dispositivo
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2359
Modo absoluto, el estilo del componente desaparece al arrastrarse al lienzo
Hola chicos, estoy trabajando con grapesjs, cuya versión es '0.15.8', y en modo 'absoluto', cuando arrastro un bloque al lienzo, noto que f...
Issue #4529
Cuando redimensionamos una imagen con la clase 'xyz', todos los elementos de la página con la misma clase también se redimensionan porque el editor añade CSS a esas clases.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión 104.0.5112.101 (Versión oficial) (a...
Issue #3832
Se eliminan las clases css y los identificadores generados automáticamente para cada etiqueta html cambian (Ejemplo: ivj5m-2) tras cada recarga
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome Enlace de demo reproducible No est...
Issue #2647
El marcador de arrastre no calcula el ancho correcto.
Hola @artf, espero que estéis teniendo un buen día. Hay un pequeño problema con el marcador de arrastre cuando un bloque se arrastra hacia...
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.