Select-kit obscured by post body

[Boost]

Hi,
I’ve been trying to fix an issue on an discourse instance I’m hosting (https://community.revolutionarygamesstudio.com) with the post category changer (the select-kit widget) being behind the post content. This is caused by my custom css and/or the theme (because another forum I’m hosting with the default theme doesn’t have this issue).
Here’s a screenshot of the issue:

I tried shoving z-index: 300; position: absolute just about to any css class that had select-kit in its name and I just could not make it appear correctly. The only somewhat working thing I found in dev tools was that by removing all the z-index styles from posts and avatars the dropdown showed up correctly, but those are discourse inbuilt ones and my theme doesn’t add extra z-index (it did at some point but I think I removed it) so I don’t want to do that.

If there are any css wizards here i’d appreciate help here as I’m out of things to try with my limited css knowledge.

[joffreyjaffeux]

You probably are using a theme or some custom css, no reproduction on meta:

[pmusaraj (Penar Musaraj)]

I signed up on your site, @Boost, but I can’t see where I can trigger the screen you posted. Please describe how you got to that screen.

[awesomerobot (Kris)]

Increasing the z-index on topic-title might do the trick, try

#topic-title {
   z-index: 5;
}

[dax (Daniela)]

I signed up too, and the problem is more serious than expected using Firefox

with this JS error:

(note that when the dev console is opened all start to work again)

Every time you try to add a category the page disappears and you need to do an hard refresh.
In safe-mode everything works normally

[joffreyjaffeux]

Also can’t reproduce on master, there’s however a warning that I will fix.

[Boost]

I was using that as a solution before. But the “post admin actions” menu goes behind the title of the topic. So so far there’s been two possible choices: either the select-kit popups are behind the posts or the post admin menu is behind the title of the topic.

[awesomerobot (Kris)]

Ah I see, that’s hard to do anything about because the title area and the posts are in two separate stacking contexts. Setting the post admin menu z-index higher/lower won’t do anything because the post’s parent container z-index is lower than the title’s.

By default we have #topic-title and .topic-body set to the same z-index. Not sure why the theme changed that.

[Boost]

That seems to have only started today when I updated to v2.2.0.beta2 +136…

[joffreyjaffeux]

Yes might be something with https://github.com/discourse/discourse/commit/1add11d8c9765e60584b599996973e1f496ad5d0

Will have a look tomorrow

[Boost]

I tried doing that again with:

#topic-title{
    z-index: 3;
}

That should be the same index as the post. But still it appeared behind it.
If I set the z-index to 4 on the topic-tittle then the select-kit popups are over the posts, but then once again the post admin menu is behind the title.

[awesomerobot (Kris)]

Hmm… yeah that’s odd. I’m not seeing anything else obvious that could be causing it.

I wonder if the order that the CSS is being applied is causing an issue? If you completely remove those two z-index values added in the theme, does that change anything?

[Boost]

When I don’t have any z-index on the topic title or the post set in the theme then it displays just like in my first screenshot. There are a few z-index things related to the background and top bar still in the theme but I hope they don’t mess with the stacking order related to this issue.

I would try updating the theme our theme is based on (https://github.com/hnb-ku/discourse-vincent-theme) but as we have directly edited the css without playing around with theme components it’s going to take quite a bit of work to separate our customizations out of it.

[Boost]

I think I may have identified what caused the issue with the theme:

/*#main-outlet > div.regular {
	display: flex;
	flex-direction: column;
}*/

When I commented out that everything seemed to be fine.

So I guess that that caused the topic title to be forced into a stacking context and then the children of it couldn’t escape from that context with any trick.

[Boost]

I just updated my discourse to version v2.2.0.beta2 +310 and there is still the issue that with firefox it is not possible to select the category for a new topic.

Should I create a bug report for this or is it already being taken care of?