Issue #5583Opened December 26, 2023by ronaldohoch3 reactions

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

https://grapesjs.com/demo

Describe the bug

How to reproduce the bug?

  1. Open demo link
  2. Click on Header image
  3. Change view to mobile or tablet.
  4. 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)

artfJanuary 11, 20242 reactions

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.

artfJanuary 11, 20241 reactions

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', 
 // ...
}),
gustavohlealJanuary 11, 20240 reactions

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: image

  • 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.

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.