SOLVED: Layout breaks when using filters on the posts element

[jomawie]

Hey there,

on a website I am using the posts element with a (category) filter on top of it. When I select a filter and scroll down the page a little bit, the (in my case 3 columns) layout shifts and breaks the 3 columns.
I’ve created a screen recording since the problem is pretty hard to describe. I hope this helps.
Layout breaks after setting a filter

Any ideas?

Thank you!

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

[charaf]

Hi @jomawie,

Could you please disable all plugins to see if there’s a conflict?

[jomawie]

Hi @charaf,

thanks for your reply. I deactivated all plugins and the problem still persists.

I also tested on Chrome, Safari and Firefox. For some reason, the problem is even worse with Firefox. The Layout isn’t even loading with three columns … it’s loading only two.

Just to be sure, I removed all of my custom CSS too and resetted nearly all the settings on the element. I removed all margins and paddings, to be sure, that they don’t affect the calculation of the li.bricks-layout-item. But that also did not help.

I also tested on another website (on another hoster and server) that is running Bricks 1.9.1.1 and got the same strange behavior.

Let me know if you need more details or something

[charaf]

Hm yeah, that’s odd. Could you please share temporary admin access to help@bricksbuilder.io with a link to this forum thread so we can investigate this further?

[charaf]

Hi @jomawie,

Thanks a lot for sharing access to both the live & staging sites. I was able to reproduce the issue and I must say it’s very odd and isn’t reliably reproducible which makes it even more tricky. It’s most likely a bug with Isotope.js so I have created an internal ticket to investigate this further

[jomawie]

@charaf Thanks a lot!

[timmse]

Hi Jochen,

We’ve fixed this issue in Bricks 1.9.4, now available as a one-click update in your WordPress Dashboard.
Changelog: Bricks 1.9.4 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse

[jomawie]

Hi timmse,

works perfect, thank you!

[avanti]

Hi,

My Posts element layout also breaks when using the Taxonomy filter with Bricks 1.9.4.
Different issue but involving the same items.

The Posts element has a 2 columns grid, working fine without a Taxonomy filter.
I see in the dev tools that the grid is handled by CSS Grid.

When enabling the Taxonomy filter (Isotope it seems), Posts in the second column are pushed below Posts of the first column.
The grid is now (badly) handled by CSS Flexbox.

[avanti]

A clue, the grid Posts get absolute positionning with inline CSS (what’s the interest in a flexbox container…?) and the values look wrong: all Posts get left: 0%;

[timmse]

Hi Emmanuel,
A builder reload should fix the positioning problem on the canvas. I can’t see any problem at the front end while trying to replicate the issue. Can you provide a live link?

@avanti

…the grid Posts get absolute positionning with inline CSS…

Yep, that’s how isotope works

[avanti]

Hi @timmse,

Thanks for having check on your end, at least i know this is not normal behaviour.
Reloading the builder doesn’t make any change on my site, so i guess there could be a conflict somewhere, i will try to troubleshoot.

And sorry i have no link to share, this is a Mamp local site.

This is not a big deal anyway, i usually use WP Gridbuilder to filter Posts grids, but i’m currently discovering Bricks and trying all i find, you know.
I thought this Isotope taxonomy filter could be useful for a quick and simple filtering.