Grapesjs: Setting background image results in duplicate style rules

[TheMysticMan]

Hi @artf,

I have one strange little problem.
I have a custom trait which has an implementation for setting images and background images.
When I set the background image a second time by using the code below I'm getting duplicated styling rules on the element Id.

var style = self.target.getStyle();
// style is empty even though the stylemanager shows the default background image from the class style rule
style['background-image'] ='url("' + newUrl + '")';
self.target.setStyle(style);

I already played around a bit with the forceClass and avoidInlineStyle but it doesn't really help with this problem.
Maybe related to this problem: The element also has a class with a default background image. When I open the StyleManager I only see that background image in there. Not the images from the Id style rules. Looks like it doesn't really use them at all?

Thanks in advance!

[artf]

First of all, I suggest using self.target.addStyle({'background-image': 'url(...)'}) for your case which is less verbose.

Maybe related to this problem: The element also has a class with a default background image. When I open the StyleManager I only see that background image in there. Not the images from the Id style rules. Looks like it doesn't really use them at all?

Well if the Style Manager sees the class on the selected component you will get its styles, try to deselect the class (by using the checkbox)

[TheMysticMan]

The addStyle method is better indeed. It doesn't fix my problem though.
The style manager doesn't see the styling on the id. I deselected the class checkboxes but the StyleManager also creates new rules instead of adding it to an existing rule.

#ixnhha{
  background-image:url(uploads/1515695340.jpg);
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-attachment:scroll;
  background-size:cover;
}
#ixnhha{
  float:left;
}
#ixnhha{
  background-image:url("uploads/1515695681.jpg");
  background-repeat-x:no-repeat;
  background-repeat-y:no-repeat;
  background-position-x:50%;
  background-position-y:50%;
  background-attachment:scroll;
  background-size:cover;
}

[artf]

Can you provide a live demo of your case because I'm not able to reproduce it

[TheMysticMan]

@artf can I PM you our environment? There you should be able to reproduce this issue.

[artf]

Start from this https://jsfiddle.net/szLp8h4n
Providing a live demo not only it shows a clear proof of the bug but also others can contribute

[samuelmattos]

Hi, i have same problem.
In preview https://jsfiddle.net/szLp8h4n/77/
When I change the background of the box in the preview it changes, but in the code it generates another id. If you save the template in this way and try to display it on the page it does not change the background.

[artf]

Thanks for the example @samuelmattos currently the only workaround I can give you is starting to use this option:

grapesjs.init({
  // Usually when you update the `style` of the component this changes the
  // element's `style` attribute. Unfortunately, inline styling doesn't allow
  // use of media queries (@media) or even pseudo selectors (eg. :hover).
  // When `avoidInlineStyle` is true all styles are inserted inside the css rule
  avoidInlineStyle: true,
})

Probably in some next release I'll set it to true by default. Unfortunately, this will not gonna fix the bug of duplicated rules but at least the rule will be placed in the way to guarantee its override. I've started to investigate the bug

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.