MediaCondition: puntos de interrupción "min-width" que no se aplican el estilo correcto en el lienzo
Deberíamos aplicar la misma lógica de https://github.com/artf/grapesjs/blob/201e1f9a61783080f7be885e9e0be9a40ecc16cc/src/codemanager/model/CssGenerator.js#L151-L162 Aquí https://github.com/artf/grapesjs/blob/201e1f9a61783080f7be885e9e0be9a40ecc16cc/src/csscomposer/view/CssRulesView.js#L122-L129
Lee la respuesta completa abajo ↓Pregunta
Hola,
Estoy teniendo algunos problemas con el enfoque móvil primero. El lienzo muestra el estilo incorrecto al establecer diferentes estilos en varios puntos de interrupción. Pero el código generado es bueno, este problema solo ocurre en el lienzo.
https://codesandbox.io/s/xenodochial-shockley-s02lp?file=/index.js:496-524
'''js puntos de interrupción const = [ { nombre: "xs", ancho: "320px" }, { nombre: "xsLg", ancho: "400px" }, { nombre: "SM", ancho: "630px" }, { nombre: "md", ancho: "740px" }, { nombre: "LG", ancho: "1024px" }, { nombre: "XL", ancho: "1280px" }, { nombre: "xxl", ancho: "1800px" } ];
const editor = grapesjs.init({ contenedor: "#gjs", fromElement: 1, storageManager: { type: 0 }, mediaCondition: "min-width", deviceManager: { devices: puntos de interrupción }, Plugins: ["GJS-Blocks-Basic"] });
! [Captura de pantalla 2020-05-14 a las 12 49 03](https://user-images.githubusercontent.com/21067002/81931499-24c10b00-95e2-11ea-9220-f650e4175fb2.png)
1. ¿Estás usando la última versión (las versiones anteriores NO están soportadas)?
**Sí, usando 0.16.12**
1. ¿Te enfrentas al problema con tu copia local de GrapesJS o con la demo actual?
**Con mi copia local**
1. Si una copia local
1. Indica toda la información sobre tu sistema operativo, navegador y la versión de GrapesJS.
**MacOs, probé en Firefox y Chrome y el mismo problema**
1. ¿Cuál es el comportamiento esperado?
**Aun así, debería cambiar según el punto de interrupción en el lienzo al usar mediaCondición: "min-width"**
1. ¿Qué ocurre en cambio?
**El estilo en lienzo solo aplica el cambio desde el primer punto de ruptura. Pero el código en la vista de exportación es correcto. El problema solo está en cómo se renderiza el lienzo.**
1. Si puedes reproducir el error, indica todos los pasos necesarios
- **Sigue este código sandbox https://codesandbox.io/s/xenodochial-shockley-s02lp?file=/index.js:496-524**
- **Cambiar el dispositivo a xs**
- **Selecciona la casilla de copiar y cambia el color de este**
- **Cambiar el dispositivo a md**
- **Selecciona la casilla de copiar y cambia el color de este a un nuevo color, el color sigue siendo el antiguo de xs**
- **Primero el escritorio funciona bien**
Muchas gracias por tu ayuda
Respuestas (1)
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1506
Problema con la consulta de medios en CSS
Hola @artf Hay un problema en la página de demostración y en la biblioteca en media query. El problema es que si el usuario actualiza el es...
Issue #1224
[Bug] Problemas con la consulta de medios y el renderizado de clases
Hola, Intentaba hacer un diseño responsivo, pero descubrí que el conmutador de dispositivos no funciona de forma consistente. El problema p...
Issue #896
[BUG] Las reglas de consulta de medios son anuladas por las reglas de clase en el lienzo
Hola @artf, He notado un problema mientras probaba una de mis plantillas usando diferentes configuraciones de dispositivos que supuestament...
Issue #2771
[BUG] componente con textable:1 no funciona desde la versión 0.16.12
Hola, Acabo de actualizar a la versión de Last 0.16.12 y tengo un error al intentar mover un componente que tiene la propiedad 'textable:1'...
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
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.