How to hide a DUDA section based on the internal content of a custom widget.

We developed a custom teacher slider widget that connects
dynamically to a collection. And in this component we had a case where the entire section should not exist when there are no cards/teachers.


This solution was easily found with CSS, using the ":has" selector, managing to hide only the flex section of DUDA that contains the specified element (this element is only created when there are no cards registered).

I just wanted to share this selector and this idea that might be useful in some cases. :)

/* CSS */
div[data-auto="flex-section"]:has(p.text-null-cards){
display:none;
}

Comments