Issue #2843Opened June 19, 2020by abozhinov0 reactions

[BUG] Can't remove style property on selected device

Question

Hi, have a problem with removing style property on selected device (clearProperties: true). You can reproduce the problem on https://grapesjs.com/demo.html.

Steps:

  1. Clean everything.
  2. Drag custom code.
  3. Add this sample code.
<div id="test">
  Test content
</div>
<style>
  #test {
  	color: red;
  }
  @media (max-width: 767px) {
    #test {
    	color: green;
    }
  }
  @media (max-width: 991px) {
    #test {
    	color: green;
    }
  }
</style>
  1. Switch devices to tablet or mobile and select the component.
  2. In the Typography style you can see that the COLOR property is YELLOW and there is NO clean icon.

I have X icon only on desktop device but on mobile or tablet is just yellow label.

Answers (3)

abozhinovJune 23, 20200 reactions

@artf do you have idea how can i fix it?

artfJuly 1, 20200 reactions

To make the StyleManager read the proper style rule your media query should reflect the same width of the selected Device. Did you try it?

abozhinovJuly 1, 20200 reactions

Yes I do it.

Code SnippetTEXT
deviceManager: {
        devices: [
        {
            name: 'Desktop',
            width: '',
            priority: 3
        }, {
            name: 'Tablet',
            width: '768px',
            widthMedia: '991px',
            priority: 2
        }, {
            name: 'Mobile',
            width: '360px',
            height: '640px',
            widthMedia: '767px',
            priority: 1
        }]
    },

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.