NO BUG: Problem using filter empty/not empty interactions

Bugs
1

Browser: Chrome 134.0.6998.36
OS: Windows

Hi bricks team,

If we use filter empty/not empty interactions, it will convert flex to block. Please see this link.

After the second search, the result title is stuck to the view all button, while the display is flex - space between.

css
css1916Ă—908 72 KB

2

Hi @HOSEIN,

any chance that you copy-paste this element here? Just so that I have same interactions and everything, when I’m testing locally.

Thank you.
Matej

3

Hi @Matej,

Yes, sure.

{"content":[{"id":"wbsykx","name":"div","parent":"aagbks","children":["jyndnj","mwiqie","exixdy"],"settings":{"_position":"relative","_width":"40%"},"label":"Nestable ajax search"},{"id":"jyndnj","name":"filter-search","parent":"wbsykx","children":[],"settings":{"filterQueryId":"iuwloi","_padding":{"top":"5","bottom":"5","left":"50"},"_border":{"width":{"bottom":"1","top":"1","right":"1","left":"1"},"style":"solid","color":{"hex":"#ebebeb","id":"zdbmmp","name":"border"}},"filterNiceName":"s","icon":{"library":"themify","icon":"ti-close"},"iconColor":{"hex":"#0c0c0d","id":"eqqjwf","name":"text 1"}},"label":"Search box","themeStyles":[]},{"id":"mwiqie","name":"icon","parent":"wbsykx","children":[],"settings":{"icon":{"library":"svg","svg":{"id":2092,"filename":"search.svg","url":"https://avangtheme.ir/wp-content/uploads/2025/03/search.svg"},"fill":{"hex":"#1f2328","id":"ligytl","name":"Text 1"}},"_position":"absolute","_top":"15","_left":"15","iconSize":"20"},"label":"Search Icon"},{"id":"exixdy","name":"block","parent":"wbsykx","children":["nvkdbu"],"settings":{"_border":{"width":{"bottom":"1","top":"1","right":"1","left":"1"},"style":"solid","color":{"hex":"#ebebeb","id":"zdbmmp","name":"border"}},"_position":"absolute","_top":"60","_background":{"color":{"hex":"#ffffff"}},"_zIndex":"9"},"label":"Search Result Wrapper"},{"id":"nvkdbu","name":"block","parent":"exixdy","children":["huzeyp","iuwloi"],"settings":{"_direction":"column","_rowGap":"20","_padding":{"top":"15","right":"15","bottom":"15","left":"15"},"_interactions":[{"id":"ocarqi","trigger":"ajaxStart","ajaxQueryId":"iuwloi","action":"hide"},{"id":"auxfeq","trigger":"ajaxEnd","ajaxQueryId":"iuwloi","action":"show"}]},"label":"Search Result"},{"id":"huzeyp","name":"block","parent":"nvkdbu","children":["dzszch","fourlp"],"settings":{"_direction":"row","_justifyContent":"space-between","_padding":{"bottom":"15"},"_border":{"width":{"bottom":"1"},"style":"solid","color":{"hex":"#ebebeb","id":"wgebmr","name":"Border"}},"_alignItems":"center","_interactions":[{"id":"ljjewo","trigger":"filterOptionEmpty","filterElementId":"#brxe-jyndnj","action":"hide"},{"id":"bhylgc","trigger":"filterOptionNotEmpty","filterElementId":"#brxe-jyndnj","action":"show"}]},"label":"Header"},{"id":"dzszch","name":"text-basic","parent":"huzeyp","children":[],"settings":{"text":"Results ({query_results_count_filter:iuwloi})","tag":"span","_typography":{"color":{"hex":"#1f2328","id":"ligytl","name":"Text 1"},"font-weight":"700","font-size":"17"}},"label":"Results count"},{"id":"fourlp","name":"filter-submit","parent":"huzeyp","children":[],"settings":{"text":"View all","filterQueryId":"guauzd","redirectTo":"https://avangtheme.ir/","newTab":true,"_typography":{"color":{"hex":"#59636e","id":"qscmex","name":"Text 2"}},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"top":"0","right":"0","bottom":"0","left":"0"}},"label":"View all","themeStyles":[]},{"id":"iuwloi","name":"block","parent":"nvkdbu","children":["pzeszi","scdbru"],"settings":{"hasLoop":true,"query":{"is_live_search_wrapper_selector":"#brxe-exixdy","posts_per_page":"8","ajax_loader_color":{"hex":"#ffd53e","id":"iwzhso","name":"site color"},"ajax_loader_selector":"#brxe-exixdy","is_live_search":true,"post_type":["product"],"ajax_loader_animation":"ellipsis","no_results_template":"2164"},"_direction":"row","_columnGap":"10","link":{"type":"meta","useDynamicData":"{post_url}"},"tag":"a","_alignItems":"center"},"label":"Search item"},{"id":"pzeszi","name":"icon","parent":"iuwloi","children":[],"settings":{"icon":{"library":"svg","svg":{"id":2187,"filename":"export-3.svg","url":"https://avangtheme.ir/wp-content/uploads/2025/03/export-3.svg"},"fill":{"hex":"#1f2328","id":"ligytl","name":"Text 1"}}},"label":"Term icon","themeStyles":{}},{"id":"scdbru","name":"text-basic","parent":"iuwloi","children":[],"settings":{"tag":"span","text":"{post_title}"},"label":"Term name"}],"source":"bricksCopiedElements","sourceUrl":"https://avangtheme.ir","version":"1.12.3","globalClasses":[],"globalElements":[]}
4

Hi @HOSEIN,

thank you so much for the element. I reproduced it locally, and I think it’s not a bug. Because when you set “show/hide” interaction, we toggle between display:none and display:block. That’s why this text is not aligned anymore, after filtering.

As a workaround, you have few options, but two most simple ones are:

  • First one: Wrap child elements inside a div/block element, so that they will not be affected by display:block
  • Second one: Instead of hiding element directly, toggle a class. And with this class, you can then set display:flex or not, depending if the class is there.

I hope it’s clear :slight_smile:

Best regards,
Matej

1 Like