Hide empty elements from content collection

Hi,

I have trouble hiding empty elements. Please se the two pages in my collection.

This one have video-URLs in the two video-fields in the CMS. Black ones up right.
http://programbolaget.webflow.io/artist/tobbe-trollkarl

And this one doesn’t.
http://programbolaget.webflow.io/artist/zillah-totte

How can I make the DIV’s disappear completely in the second one?

Regards,
Tomas

1 Like

Hey Tomas,

Welcome to our community :) I hope you’ll enjoy it!

Regarding your question, the divs do not disappear entirely due to the fact that there is a padding on the video container. If you were to remove the padding from those nodes, then they will disappear entirely due to no content being in them :)

Yes, exactly. Problem is. I want that black border around the videos. :smile:

How do I accomplish that?

Really happy to have found Webflow and looking forward to take part in this vibrant community also. Thanx! :smile:

I think I’ve solved it. What do you think about browser-compatibility on this one.

Added this to custom HEAD-code.

<style>
div.videodiv:empty { display: none }
</style>

Tomas

2 Likes

Oh, great solution! Didn’t know about using :empty! Good to know you’ve found solution :)

1 Like

Tomas: Is there a similar solution for my question here? - CMS - hide element if value is null

Problem would be that the field for the collection item would need to be tested for null, vs testing the contents of a div. Any ideas?

I think it should work, if during styling content, you will wrap that field with the div and then add this code to specific div class.

Yep, it can work. Otherwise you will have to use JS to get this going. :slight_smile:

Just found out I can’t even test. No paid subscription = no editing Head code. Oh well. I’ll wait for an official response in the other thread. Thanks for your quick repsonse.

Aah, bummer. :slight_smile: No worries, glad to discuss it.