Show-Hide Empty Collection Fields setting

Fibery Showcase
1

Here is a prototype for the feature request: Hide empty fields (specifically relation collection fields). I hope something similar will be implemented by Fibery soon.

msedge_3BnIjCNPRH

How:

  1. Add a checkbox field (name e.g. HideEmptyFields)
  2. Add the following css to either FiberFlow, Stylus or similar browser extension:
/* Hide empty relation fields when ShowEmptyFields checkbox is unchecked */
div:has(.checkbox.uxtwros) div.relation_views_field_container:has(.AKTree:not(:has([data-react-beautiful-dnd-draggable]))) {
  display: none;
}

Fancy:

For sliding in and out effect, use this ccs instead of the one above:

/* Default: Ensure relation fields are visible and ready for animation */
div.relation_views_field_container {
  max-height: 1000px; /* Large enough to accommodate most fields */
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

/* Hide empty relation fields with slide-up animation when ShowEmptyFields is unchecked */
div:has(.checkbox.uxtwros) div.relation_views_field_container:has(.AKTree:empty) {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

Related topics:

2 Likes