Change Picture Dialog Unavailable

[Shaun]

Not sure this goes in bug reports as it could be a configuration issue on my end.

When users attempt to update their avatar on my forum, they are met with a "greyed out" dialog with nothing on the page clickable (and have to refresh the page, losing the dialog to clear it at all).

This occurred on 0.5.3 and is still happening after updating to 0.5.4.

[Shaun]

Anyone have a clue what might be going on here?

[julian]

@Shaun which part is greyed out, the buttons?

[Shaun]

Everything. It's like the modal blocker is blocking the modal as well as the background. Nothing is clickable and the only thing you can do is change the URL or refresh the page in the browser.

[Shaun]

Confirmed with developer tools. The modal background is blocking the modal itself.

[julian]

Hm... could it be the theme you're using? Does this happen on vanilla/lavender?

[Shaun]

Yes, I think it is something with the theme, but I'm using vanilla (slate bootswatch skin).

If I set "display: none;" on the modal background DIV, the links are clickable.

[Shaun]

I found this CSS class attached to the modal-backdrop DIV:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

Everything in the class is overridden except the z-index. Eliminating that z-index fixes the problem. The source for this class is stylesheet.css with a querystring parameter.

[Shaun]

Alternatively, setting z-index to 1041 (it is also 1040) on the modal DIV fixes it, as well. But that's from bootstrap.min.css, so I'm assuming the class above is the actual problem.

[Ralkage]

I've tried a few of the bootstrap skins and some are a little buggy ever since I updated to 0.5.4. Just looks weird as heck lol

[Shaun]

I don't really have any problems with bootstrap or the vanilla theme other than this one. If anyone else is experiencing this, putting this into your custom CSS area will fix it as a temporary workaround:

UPDATE: The fix below actually causes the problem in newer versions of NodeBB, so please do not use it. Updating your NodeBB will resolve the basic issue now.

.modal-backdrop {
    z-index: 1039;
}

[Shaun]

Any chance someone who's more familiar with handling these things can get this updated in the vanilla theme? @baris, perhaps?

[Shaun]

Not sure what's happening here, but this bug has popped back up on me. It was fixed for a while and then came back up at some point (though I don't know exactly when).

I've had to re-add a slightly modified workaround to make this functional on my forum:

.modal-backdrop {
    z-index: 1039;
}

.modal-dialog {
    z-index: 1040;
}

Edit: Forgot to mention - currently running NodeBB 0.6.1, unmodified vanilla theme (except that I do have the IE mobile viewport hack in custom html script tags).

[julian]

@Shaun Likely related to Bootstrap versions being incompatible or out of date or something...

v0.7.0 doesn't suffer from this issue, but seems it's cropped back up for v0.6.x?

[Shaun]

Yeah, I don't understand. I think the modal-dialog doesn't have a z-index (which is why I had to change my workaround above to fix it). TBH, if it's fixed in 0.7.0, I'll be happy with just using my workaround until then. A few extra lines of CSS won't kill me.