BUG: Can't set background:none in mobile version using styles panel
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Edge last version
Reproducible demo link
Describe the bug
How to reproduce the bug?
- Open demo link
- Click on Header
- Change view to mobile or tablet.
- Try to remove background from header.
What is the expected behavior? That editor set header with background:none
@media (max-width: 480px){
.header-banner{
background:none;
}
}
What is the current behavior? GrapesJS inherit from the ‘desktop’ version, so it's impossible to remove background from mobile version.
It happens using 'background' stack version and 'background-image' alone version.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
not a bug but a missing feature, we'll need to extend the stack type with a new configuration for "empty" values. I'll try to bring it in the next version.
the clear icon from de property Background removes completely the properties from the selected device making it inherit again the values from the desktop settings.
Correct
the clear icon in the layer line resets the stack values, setting the properties for the selected device to its default values, removing the background and not inheriting from the desktop settings. Clicking again in the same clear icon will remove the layer completely.
I'm not sure if that's exactly what I have in mind but the idea is to make it work as it is but with an additional logic, when I remove the last layer, I'll apply the new property, if exists (eg. emptyValue).
That is a possible property type
emptyValue?: string | () => PropValues;
In the case of string
emptyValue: 'unset',
I'll update the style target properties with that value { background-image: unset, background-size: unset, ... }
Or I can decide to generate the style properties directly (in case of more advanced usage)
emptyValue: () => ({
'background-image': 'unset',
'background-size': 'other value',
// ...
}),
I've inserted a solution for the stack type. I'm going to make a PR but I would like to ask you something first. The behavior i'm adding is:
- the clear icon in the layer line resets the stack values, setting the properties for the selected device to its default values, removing the background and not inheriting from the desktop settings. Clicking again in the same clear icon will remove the layer completely.
- the clear icon from de property Background removes completely the properties from the selected device making it inherit again the values from the desktop settings.
This is the behavior i'm applying to our version of the grapes. If you think that this should be de standard behavior i can make the PR later What do you say?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4503
BUG: Missing inline styles used by CKEditor when adding raw html components
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chromium v96 Reproducible demo link https:...
Issue #5378
BUG: Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas') while dragging a component in Layer Manager Panel
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v116.0.5845.97 Reproducible demo li...
Issue #5320
BUG: Upload Image or Asset is not triggering on File/Image selection
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v114 Reproducible demo link none De...
Issue #5263
BUG: Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo...
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.