5.0.0: CSS Grid purple toggle lost the icon

Beta
#1

Hi!

When we hover over a CSS Grid element, there should be a purple button at the top-right with an icon. It is now empty, without the icon.

image

EDIT: After resizing CSS Grid for a while, the preview area got stuck. I wasn’t able to scroll it anymore, and also the purple toggle stopped responding.

Thanks!

#2

Thanks Misho,

That’s strange, next time it happens would you mind dropping into dev tools and letting me know what you see inside this button?

Screen Shot 2021-08-19 at 10.55.37 AM
Screen Shot 2021-08-19 at 10.55.37 AM1862×1432 470 KB

There should be the is-check-circle SVG in there. Not sure what could cause that to go away. Also, let me know if you see any other errors in the javascript console in that instance.

Thank you!

#3

Hi @alexander,

I have found the culprit!

So CSS Grid element is placed inside a Section that has a custom SVG background.

That section has this CSS:

$el svg {
  transform: rotate(180deg);
  fill:rgb(207, 242, 251);
  position:absolute;
  bottom:calc(10vh - 1px);
}

So this CSS affected the icon. Looks like something that shouldn’t be happening? Or should I add more specificity in the future?

Thanks!

#4

Oh gotcha! Yeah, that’s not really something we can avoid since the SVG does get output inside the grid element. Maybe be more specific, or just target the preview like:

body:not(.tco-preview) $el svg {}
1 Like
#5

Interesting. I have tried this:

body:not(.tco-preview) $el svg {
  transform: rotate(180deg);
  fill:rgb(207, 242, 251);
  position:absolute;
  bottom:calc(10vh - 1px);
}

However, it broke the custom SVG. The CSS stopped applying to the custom background. Just for your info, in case that means anything. :slight_smile:

Not a big deaI. I have added a class to the SVG and solved it.

Thank you!

#6

I’m sorry, not sure where my brain is. Using body:not(.tco-preview) just prevents CSS from running at all in the live preview so that would break your custom SVG while protecting the UI element. Glad you got it sorted out!

1 Like