Semantic-ui: [Loader] Inline loader within a dimmed modal is not visible due to wrong color

[ArkadyDR]

http://jsfiddle.net/o92qen2j/

There is a loader in the bottom panel of the modal but it is white on a white background.

I was trying to create a 'please wait, reconnecting' dialog for my SPA, which involved putting an inline loader into the action section of a dimmed modal. What I believe is happening from inspecting the element is that it is seeing the dimmer class from the modal and then selecting the inverted color style that it needs to display on top of the dimmer, not taking into account that it is actually being displayed on the modal (white) and not the dimmer (black).

I've worked around it for now with border-color overrides for .ui.dimmer .ui.modal .ui.loader:before and .ui.dimmer .ui.modal .ui.loader:after, but this seems like it would come up for anyone building an application using modals?

Edit: I should also note that applying the 'inverted' style to the loader doesn't correct the problem.

[jlukic]

This is a hard to fix issue. The dimmer selector has to be vague to allow for table-cell style and content nested div. Unfortunately this means modal content gets the flipped color required for a loader overlaying a dimmer.

[xxzefgh]

@jlukic Is this going to be fixed? I just commented these lines in loader.less, but it should be fixed properly. I can try to fix if you wanted

.ui.dimmer .ui.loader {
  color: @invertedLoaderTextColor;
}
.ui.dimmer .ui.loader:before {
  border-color: @invertedLoaderFillColor;
}
.ui.dimmer .ui.loader:after {
  border-color: @invertedShapeBorderColor;
}

[dvnrsn]

Tried commenting out lines, no go for me. Tried to mimick some of these ideas. Loader will show but modal always gets stretched vertically as extra classes sneak in with dimmer..?

[waaghals]

Came across this bug as well, my current work around is by correcting the loader colors again when the .ui.loader is in a .ui.modal which is in a .ui.dimmer.

Something like this:
.ui.dimmer .ui.modal .ui.loader { color: @loaderTextColor; } .ui.dimmer .ui.modal .ui.loader:before { border-color: @loaderFillColor; } .ui.dimmer .ui.modal .ui.loader:after { border-color: @shapeBorderColor; }

N.B. I did this manually with css, so less variables names might be incorrect in my example.

[dehypnosis]

in definitions/elements/loader.less coupling section,
changing .ui.dimmer ... to .ui.dimmer:not(.modals) ... made it worked for me.

/*-------------------
      Coupling
--------------------*/

/* Show inside active dimmer */
.ui.dimmer:not(.modals) .loader {
  display: block;
}

/* Black Dimmer */
.ui.dimmer:not(.modals) .ui.loader {
  color: @invertedLoaderTextColor;
}
.ui.dimmer:not(.modals) .ui.loader:before {
  border-color: @invertedLoaderFillColor;
}
.ui.dimmer:not(.modals) .ui.loader:after {
  border-color: @invertedShapeBorderColor;
}

/* White Dimmer (Inverted) */
.ui.inverted.dimmer:not(.modals) .ui.loader {
  color: @loaderTextColor;
}
.ui.inverted.dimmer:not(.modals) .ui.loader:before {
  border-color: @loaderFillColor;
}
.ui.inverted.dimmer:not(.modals) .ui.loader:after {
  border-color: @shapeBorderColor;
}

[scherroman]

To work around this, use an inverted dimmer for the modal, and just override the background-color for inverted dimmers via css.

<Modal dimmer='inverted'>
    <Modal.Content>
        <Loader active size='large' inline='centered'/>
    </Modal.Content>
</Modal>

.dimmer.inverted {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

If you'd still like to use the original color of inverted dimmers elsewhere, use a custom css class

<Dimmer active className='white-dimmer'>
    <Loader active size='large' inline='centered'/>
</Dimmer>

.white-dimmer {
    background-color: rgba(255, 255, 255, .85) !important;
}

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[ma7moudat]

Had this same issue today. We could simply redefine the loader inverted variation for this case.

I changed definitions/elements/loader.less as follows:

/*-------------------
      Coupling
--------------------*/

/* Show inside active dimmer */
.ui.dimmer .loader {
  display: block;
}

/* Black Dimmer */
.ui.dimmer .ui.loader {
  color: @invertedLoaderTextColor;
}
.ui.dimmer .ui.loader:before {
  border-color: @invertedLoaderFillColor;
}
.ui.dimmer .ui.loader:after {
  border-color: @invertedShapeBorderColor;
}

/* Black Dimmer - Loader Inverted */
.ui.dimmer .ui.inverted.loader {
  color: @loaderTextColor;
}
.ui.dimmer .ui.inverted.loader:before {
  border-color: @loaderFillColor;
}
.ui.dimmer .ui.inverted.loader:after {
  border-color: @shapeBorderColor;
}

/* White Dimmer (Inverted) */
.ui.inverted.dimmer .ui.loader {
  color: @loaderTextColor;
}
.ui.inverted.dimmer .ui.loader:before {
  border-color: @loaderFillColor;
}
.ui.inverted.dimmer .ui.loader:after {
  border-color: @shapeBorderColor;
}

/* White Dimmer (Inverted) - Loader Inverted */
.ui.inverted.dimmer .ui.inverted.loader {
  color: @invertedLoaderTextColor;
}
.ui.inverted.dimmer .ui.inverted.loader:before {
  border-color: @invertedLoaderFillColor;
}
.ui.inverted.dimmer .ui.inverted.loader:after {
  border-color: @invertedShapeBorderColor;
}

Worked fine for me. Should I submit a PR or would it be rejected for some reason?

[pferreir]

Related issue: the active class doesn't seem to matter at all when it comes to the visibility of the loader. This happens for the same reason as the color problem.

[lubber-de]

Fixed this in https://github.com/fomantic/Fomantic-UI See here http://jsfiddle.net/o92qen2j/10/
In the end the only needed fix was to set the dimmer loader color and display (to fix the active issue @pferreir mentioned above) for the direct next child only.

For example (for explanation, the PR i did, fixes it everywhere)

/* The > makes the difference! */
.ui.dimmer > .ui.loader {
  color: @invertedLoaderTextColor;
  display:block;
}

[Puspendert]

Any update on this? Are we still working with workarounds?

[lubber-de]

@Puspendert as mentioned before, this was fixed in Fomantic-UI 2.7.2 by https://github.com/fomantic/Fomantic-UI/pull/359

[Puspendert]

@lubber-de Why only in Fomantic? Is semantic-ui being no more maintained by community?

[lubber-de]

@Puspendert
Please read the following issues
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413