[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:
- Clean everything.
- Drag custom code.
- 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>
- Switch devices to tablet or mobile and select the component.
- 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)
@artf do you have idea how can i fix it?
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?
Yes I do it.
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.
Issue #4496
BUG: setStyle
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome latest versionReproducible demo link...
Issue #4448
BUG: Error on resize image.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Brave Browser Last version Reproducible de...
Issue #3082
XSS Vulnerability in Live Preview
Version: 0.16.22 Are you able to reproduce the bug from the demo? [ x] Yes Steps:Click Import HTMLInsert <img src="anyimagesource.gif" onlo...
Issue #3444
removeButton() causing error
Hi, I'm trying to remove a button from panel using this code editor.Panels.removeButton('options', 'fullscreen') . It removes the button bu...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.