So it should be:
.nav-pills:empty, .category-heading:empty, .topic-list-bottom:empty { display: none; }
but it doesn’t seem to work in Developer Tools… so I’m not sure.
@RyanReese, @PaulOB, any idea what other rule is conflicting with the above?
yeah this dosn’yt seem to work. also i don;y know if you know anything about this, but when someone tries to post a topic/post it says: Unknown error saving post, try again. Error: 500 Internal Server Error? Do you know how i can fix this?
Yeah, the Discourse team can better remedy that, than I. There is still a lot under the hood of Discourse that even I don’t understand 
I’m hopefully Paul or Ryan can give me some insight why the same :empty function doesn’t work for the other two elements on the page.
1 Like
Your CSS is spot on @cpradio .
The problem is that you’re not fully interpreting the :empty pseudo class. It needs an ENTIRELY empty element. Take that navigation <ul> and right click and “Edit as HTML”
There is white space in there. Removing the white space fixes the problem in the HTML.
So get rid of the white space. The code that generates the list needs to be hugging the <ul> and </ul> so that if nothings there, it’s completely empty with no white-space. E.g.
<ul class="nav nav-pills" id="navigation-bar"></ul>
Edit - to be clear, this will need to be done for all the other elements in the CSS that it’s targeting.
1 Like
yeah i tried asking the meta forum but still no explanation on how to fix it so i came to you!
Awww, that bites. As that is outside of his control. Any other ideas on how to hide a element using CSS if it is empty (or contains whitespace)?
He can’t modify the underlying code and remove the white space? That’s quite stupid really. Let me think about an alternative.
You can, it just requires a plugin or forking Discourse… neither of which is a good idea at this stage.
If it helps, I know Discourse supports SCSS too, so if there are SCSS rules that help identify these scenarios, we can use them.
I’m thinking - in all cases other than this hiding one, the UL MUST have children LI correct? That accounts for every other case? As a first-child I mean.
Sounds right.
Nah not with CSS alone do I think this is possible. I’m not an expert in SASS (I think preprocessors are stupid - but I still use it for work sometimes.)
This might be possible with SASS (not sure of the full capabilities.) but I highly doubt it. CSS alone it’s not possible I think. I thought about it…CSS3 did have a pseudo class for something like this (I think it could be manipulated for this situation) but even so, it got removed from the draft specification (even if it didn’t, support would be terrible.)
Long story short - either use JS to trim the white-space (and use @cpradio CSS) or venture into plugin/forking territory.
Try putting this in the footer section of your customizations:
<script type="text/javascript">
if ($.trim($('#navigation-bar').html()).length == 0)
$('#navigation-bar').hide();
if ($.trim($('.category-heading').html()).length == 0)
$('.category-heading').hide();
</script>
One thing to note is that users without JS will have those boxes still appear. Never tried running Discourse without JS but it’s something worth noting. I’d really try and get rid of the white-space in the HTML…
From what I hear, it’s not something you really want to do…
You can’t do much but read-only activity without JS, so I don’t think it’ll be much of a problem.
Yeah Discourse seems to be pretty JS-heavy so I imagine the UX will drop pretty significantly without JS. Compared to some random gray boxes, shouldn’t be too much of an issue I guess.
I wish :empty actually worked hte way it was originally designed…
You and me both! 
Off topic:
How can I look up the W3C specs for a particular CSS property or pseudo-class? :empty would be a great place to start.
I think there are versions of the drafts but I wouldn’t bother reading them. I just read the drafts as it comes out which isn’t TOO often so I’m at a point where it’s not too much of a hassle to read a new draft or what not. I read through the entire draft when I made my “Future of CSS” article where I read through the entire specificiation / new / old drafts finding features that might be coming in the future. Lots and lots of reading…