Semantic-ui: [Loader] wrong style when appears inside a Modal

[felixmosh]

[Loader] rendered inside a Modal will be white on white

Steps

Create a Loader inside of the content of the modal

Expected Result

Loader should be none "inverted" (white on black) but regular, but because of the fact that Modal has .dimmer behind it, the loader becomes inverted

Actual Result

Loader inside of Modal should be visible

Version

2.4.2

Testcase

https://jsfiddle.net/7ucjso1y/

[lubber-de]

This has already been fixed in the community fork Fomantic-UI
See your adjusted jsfiddle here
https://jsfiddle.net/lubber/r8fcuak3/1/

[felixmosh]

Can I just replace the css file?

[lubber-de]

Can I just replace the css file?

Usually Fomantic-UI is backward compatible to SUI, so you can try that.
However, since the last release of SUI in 2018 we already fixed around 500+ bugs or added new features, so the FUI css is probably only correctly working together with FUI JS as well.

[felixmosh]

The problem with fui is that is doesn't have React components :/

[lubber-de]

The problem with fui is that is doesn't have React components :/

As said, the CSS Part is 99% compatible to SUI React (1% "missing" because we improved the rating component and have lots of new components, which SUI React does not cover, because they are bound to the latest Version of SUI). So unless you have the need of new features, it should work by just using the CSS file of FUI and keep everything else from SUI(-React) as it is.
AFAIK the SUI react team is working on a FUI compatibility layer.

[Ray-B]

The problem with fui is that is doesn't have React components :/

Just want to add, as lubber-de mentioned. That its absolutely possible to use the FUI CSS along with Semantic UI React.

We are currently using this pattern for an internal tool that serves dozens of operational members and developers and have been happy with the stability.

I'd encourage you to check out FUI (fomantic UI).

If you find this helpful, consider contributing some code of your own to either the Semantic UI react or Fomantic UI projects (check out the "good first issue" tag)

[felixmosh]

Thank you, but As I've mentioned, I'm using SUIR, therefore, there is no reason to load a larger css file just for fixing "one small issue". I'm fixing it in my code.

[Ray-B]

Thank you, but As I've mentioned, I'm using SUIR, therefore, there is no reason to load a larger css file just for fixing "one small issue". I'm fixing it in my code.

Not quite sure I understand you. You can use FUI less to completely replace the css from SUI. Not only would it fix the issue you describe, but hundreds of other bugs as well.

I doubt the size difference between SUI css and Fomantic CSS would be substantive but if you have a very special use case and you're only using select components, you could just import the matching less modules from FUI by adjusting the theme file to your liking.

[felixmosh]

Thanx for the explanation, I'll take a look at it