Issue #2774💬 RespondidoAbierto el 14 de mayo de 2020por vinceumoReacciones 0

MediaCondition: puntos de interrupción "min-width" que no se aplican el estilo correcto en el lienzo

Respuesta rápidapor artf

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.

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.