The database activity provides a great way to collect and present structured data in courses. With the custom CSS and custom JavaScript it is possible to design usable and nicely arranged UIs for it.

For my current database I want to hide those fields in the single view template that contain no data. For this I tried two approaches: 1. Using JavaScript to hide those HTML element by assigning them a special class. 2. Using CSS pseudo-classes like :empty and :has to hide the fields without needing JavaScript.

Both approaches work well in the browser, but not in the App!

Since the app will not support JavaScript (see MOBILE-3172), it would be nice, if the App would at least support those advanced CSS selectors, classes and styles.

Here is my example for the template

<div class="db-entry-value mt-4">

  <span class="db-entry-value-title font-weight-bold">[[Field#name]]  

  </span>

  <p class="mt-2">[[Field]]</p>

</div>

The corresponding CSS looks like this:

.colleague-entry-value:has(p:empty) { display: none; }

It would be nice, if this could be supported or if another solution were possible?! Most of my students use the app and all functions it does not support, are essentially not usable. Thanks!