Style change on edit (box-shadow and border padding)

[Ardius]

I added some style to the editor and i noted a problem on some of them.

ContentTools.StylePalette.add([`
       new ContentTools.Style('inset shadow', 'img-shadow-inset', ['img']),
       new ContentTools.Style('external border', 'img-border-ext', ['img'])
          `]);

.img-border-ext {
  border: solid ;
  border-width: 1px;
  padding: 3px;
}

.img-shadow-inset {
  -webkit-box-shadow: inset 70px 70px 20px -7px rgba(0,0,0,0.90);
  -moz-box-shadow: inset 70px 70px 20px -7px rgba(0,0,0,0.90);
  box-shadow: inset 70px 70px 20px -7px rgba(0,0,0,0.90);
}

The class containing a border (img-border-ext) is not displayed correctly during editing.

But the strangest thing is the another class, with an inset box-shadow, that is only displayed correctly during editing.

In other words, the page changes when the edit start.

You could view this problem here: https://jsfiddle.net/draio/yk3tvjpg/

Thanks

UPDATE: Ok, my mistake ... The CSS3 inset shadows don’t work on images On edit mode the image is "transformed" into a div and thats do the trick.

[anthonyjb]

Hi @draio,

The reason for the box shadow I imagine is because images may not support inset, however when in edit mode images are converted to divs for the purpose of interaction and therefore the style is supported.

For the same reason your border appears differently in the edit mode because your applying padding which is handled differently by images than it is by divs (actually it's not handled differently it appears different because the padding is covered in the div because of the use of background image). Setting the size of the border to 4px and removing the padding from the image is all that's required to resolve the issue.

[Ardius]

Thank you!

[Ardius]

Just to let you know ... or for someone else who has the same problem.

The .img-border-ext class show a single 1 pixel border to 3 pixels from the image. Removing the padding and changing the width make only a big border (4px).

I added "background-clip: content-box" that move the background to the content area of the div . So now I have a class that works both with img and div ... and seems almost (almost) equal in normal or edit mode. It's not perfect but it works.

.img-border-ext {
  border: solid ;
  border-width: 1px;
  padding: 3px;
  background-clip: content-box;
}

https://jsfiddle.net/draio/2b277whx/