Tailwind CSS + Blockly

[Joshua Lowe]

Hi all,

I've come across an issue with using Blockly + Tailwind CSS. 

Tailwind uses Normalize.css to make styling more consistent across browsers, however, it includes this block of code when tailwind gets built: 

"display: block;" is interfering with blockly's scrollbars causing them to stay on the workspace when the flyout is closed. 

Tailwind doesn't really have a way to not include this on build so I was wondering if Blockly had a way of ignoring external CSS like this?

[Abby Schmiedt]

Hello!

I unfortunately don't know of any way to ignore external CSS. In updateDisplay_ we set the display attribute on scrollbar svg to be 'block' or 'none'. It looks like the css is overriding this. If you instead update the css in this method you don't get this problem anymore. I really don't recommend this since it requires you to access private variables, but if you are in a bind you could do something like this: 

this.outerSvg_.style.display = 'block';

Looking through our code it looks like we use `setAttribute` and `style.display` interchangeably. I made a bug to look into this and check if we can move everything to `style.display` since that seems to be used more often, but there might be a reason we are using one over the other so I will not promise anything : )

Cheers, 

Abby

[Andrew Bullen]

I bumped into this same problem today and was wondering whether any solution has been identified in the meantime. I see a bug report was made but I'm unsure whether it led to a fix or work around.

[Neil Fraser]

Would you be able to add some CSS to your application which restores the proper behaviour?  Something like:

svg {

  display: inline !important;

}

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/3fa97590-7f6b-438f-8c85-0e105576c0ebn%40googlegroups.com.

--

Neil Fraser, Switzerland
https://neil.fraser.name

[Koushik Ghosh]

This is preventing flyout from closing.

```

svg {

  display: inline !important;

}

```

This worked 

```

svg[display="none"] {

  display: none !important;

}

```

[Andrew Bullen]

Confirmed as a solution to this problem.

Thanks for posting.

Andrew

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/5410oK8nbJY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/c1fd35df-5b12-43ee-b8b5-d61e7d38f29dn%40googlegroups.com.