I’ve been working with the “Filter: Empty / Not Empty” interactions to build a filter UI, and I’d like to share two observations from a layout and workflow perspective:
1. Layout flexibility with “Not Empty” elements
When I use an interaction to show a container only when a filter is active (for example, a wrapper that holds my active filter chips and a “Clear all” button), Bricks applies an inline style of display: block.
The challenge is that if I have designed this container as a Flexbox to keep the chips and the button in one row, the inline block style overrides my layout. I then have to use !important in my CSS to get my horizontal alignment back.
Would it be possible to find a way to show these elements without forcing a specific display type like block, so that our custom Flex or Grid layouts stay intact?
Important Note on Workarounds: I found that I cannot simply use !important in my CSS (like display: flex !important) to fix the layout. If I do, the “Filter: Empty” interaction to hide the element (display: none) no longer works, because the !important rule prevents the element from being hidden.
New Workaround:
.filter-bar__selection:not([style*=“display: none”]) {
display: flex !important;
flex-direction: row;
align-items: center;
}
2. Avoiding “flickering” on page load
Currently, when a section is set to hide when a filter is empty, it sometimes “flickers” briefly during the page load or when the results refresh. It seems the element is briefly visible before the logic hides it.
Is there perhaps a way (maybe via Conditions) to handle this so the element isn’t just hidden, but only appears when it’s actually needed? This would make the user experience much smoother and prevent the layout from jumping.
I’m curious to hear if there are already better ways to handle this or if these points could be considered for future updates.