Cannot edit mostly anything in admin control panel - there's a transparent layer blocking mouse contact

[Fuad Othman]

Hi, Here my first post in this community, oh yeah i've manage to get nodebb running in my vps - digitalocean.
so here some bug that blocking me from editing several element on admin panel.

as example, when im in categories section, i try to add new category, the setting will popup with some black layer, when i press it will close the popup, i only manage to navigate behind the layer with keyboard navigation however not all can be access using keyboard., mostly all section has this bug, please help.

I already try this with chrome and internet explore, same bug occur

[Shaun]

Looks like you may have an issue similar to this one: https://community.nodebb.org/topic/3195/change-picture-dialog-unavailable/12

The fix there may be a useful workaround for you (you can test it out in the Chrome developer tools by pressing F12). You should also make sure you have the latest CSS files and other resources by clearing your browser cache.

[Shaun]

So, I'm actually having this exact problem on this thread. I quoted my own post when I meant to edit it (iPad plus fat fingers) and I cannot delete the accidental post, because the modal window to confirm deletion is blocked by the modal background.

Did a full reset of Safari's cache to mak pe sure I didn't have any stale CSS, still have the problem.

[Fuad Othman]

Regarding the workaround on chrome developer tools, can you explain its step by step?
I did try your custom css workaround, but this bug still persist.
I think this is general issue for others as well as i'm on default setup, not even touch any code or changes theme yet.

[Fuad Othman]

Guys, any solution.. this is major bug,

cannot manage categories
cant manage user
cant upload logo / branding
cant add group

Please, my development halted due to this bug.

[julian]

Please update to the latest code -- this should be resolved.

[Fuad Othman]

I already on latest i think - v.0.6.1-dev
any other recent than this? cant found any after run ./nodebb upgrade

[psychobunny]

Did you run git pull first to get the latest code? ./nodebb upgrade only updates dependencies and database migration

[Fuad Othman]

i run this by step,

git pull
./nodebb upgrade
npm install
ls -d node_modules/nodebb* | xargs -n1 basename | xargs npm update
node app --upgrade

however im still on version v.0.6.1-dev

is my installation corrupt?

[Fuad Othman]

Guys, the version not change,

however after step above,

i press ctrl+f5 on chrome, no more black layer,

thanks guys, real help.

[Shaun]

@Fuad-Othman CTRL-F5 causes the browser to refresh the external resource files (CSS and JS files, usually) and clearing the cache would have done the same thing for you.

I have had several weird post-upgrade issues with things like this and a force refresh or cache dump usually fixes it.

@julian I understand that being pre-release means the release schedule is accelerated and that's the major cause of these things, so this is surely a low priority, but at some point it might be prudent to add version numbers to the CSS/JS files to prevent these browser cache issues.

[julian]

@Shaun Production mode should manage cache busters, but they're not present in devlopment mode... perhaps we're missing headers that instruct the browser to not cache assets...

[Shaun]

@Fuad-Othman said:

Regarding the workaround on chrome developer tools, can you explain its step by step?

For the purposes of posterity ... if you press F12 in most browsers, you can inspect and manipulate the elements of a page. In this case, if you hit F12 and found the DIV tag with the modal-backdrop CSS class, it has a CSS property called z-index, which controls the layer position of the element. The basic problem here is that both the backdrop and the modal window have z-index values of 1040, which leaves it up to your browser to decide which one is actually in front of the other (I would think in this circumstance, the later element on the page should be treated as "in front" but that's not what's happening), so you can manually manipulate the z-index value to make the page function in your browser. And after confirming that that's the problem, obviously, you can make the changes permanent in the CSS files or whatever.

I did try your custom css workaround, but this bug still persist.

The custom CSS I posted in that other thread would fix the issue on the main forum, but I don't think that the admin panel loads that CSS, so I didn't expect it would fix your problem directly (but you could modify the CSS file for the admin panel).

[Shaun]

@julian I don't think I'm running in development mode. You have to start it in development mode specifically, right? I'm just running nodebb start as advised by the Ubuntu docs. I recall using a different command to put it in development mode to troubleshoot something once. I tell my users to hit CTRL-F5 every time I do an upgrade, because there are usually some oddities if they don't.

[Fuad Othman]

Bug on administration panel now clear already, however it keep happening on thread management,

here some,

its also happen in this thread when i try(test) to delete it too.

still got black layer blocking mouse input.

[glitch]

Opening the modal popup for the emoji or polling on this thread does it as well. The extended emoji is grayed out, but you can escape out of it, unlike the emoji/polling modals.

[RazorAxis]

I am having this happen on things like uploading avatars and deleting or moving threads. I tried posting this in the custom cc and it didn't work:

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

Any ideas?

[pichalite]

@Fuad-Othman @RazorAxis

Cannot flag or delete posts · Issue #2591 · NodeBB/NodeBB

NodeBB v0.6.0 & v0.6.1-dev

GitHub (github.com)

The issue is marked as closed but it's not fixed yet.

[RazorAxis]

Thanks. @pichalite Just curious what does it mean when its closed but not fixed?

[pichalite]

@RazorAxis @julianlam closed it as invalid, changed it to bug later but did not reopen it. It will probably get fixed in v0.6.1.