Issue #1319πŸ’¬ AnsweredOpened July 25, 2018by jmrgz0 reactions

BUG Box shadow - not working in the demo too

Quick answerby artf

Unfortunately, this is caused by the browser's CSS parser which rearranges the order of box-shadow values, so if you import your templates from HTML we can do nothing until we'll be able to use custom CSS parsers (I close this in favor of #1079), but if you create templates from the editor and store them correctly it...

Read full answer below ↓

Question

I have noticed this too late, a few days after finishing my project. I wanna cry :( To reproduce the steps: 1- Go to the demo and select any "card" block (any of the blocks under the ### Flex is the new black title). Be sure that you are selecting the main parent (.card class) 2- As long as you select it, they automatically lose their normal state box shadow (values are bugged after selection). 3- Now change to hover state, they will lose their shadow too (again bugged values) This happens with every design when you save/open or when you reload the page on the current design. Any workaround?...

Answers (3)

artfβ€’ July 26, 2018

Unfortunately, this is caused by the browser's CSS parser which rearranges the order of box-shadow values, so if you import your templates from HTML we can do nothing until we'll be able to use custom CSS parsers (I close this in favor of #1079), but if you create templates from the editor and stor...

jmrgzβ€’ July 26, 2018

Thank you @artf Is there any clue of what part of the code "explodes" the browser parser attributes to fill in complex style manager properties? (it happens when you open the style manager) I would love to know where you transform this: box-shadow:10px 10px 5px 10px black ; Into this: X position: 1...

lock[bot]β€’ September 17, 2019

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.

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.