CMS + Isotope + Position problem

Hi everyone !

Just look at the problem
I designed this
Read-only link
But i get this
Page publishing

I know the problem is Isotope wich change my item position to absolute, I saw this post where sabanna says to use mixitup instead of isotope but that’s not that simply for me, cause i got the searchbarre from isotope and i can’t apply mixitup…
I tried to force position with a position:relative!important before the tag and it works my items looks good… BUT.
A new problem wich can’t be solved either appear : when i search and item filters, the animation is so broken that items looks like drunk mouse, i can’t let that.

Please tell me i didn’t find a method or anything simply to solve this <3

mixitup search example:
https://demos.kunkalabs.com/mixitup/filtering-by-text-input/

Anyway, please add screenshot of your problem (Very hard to understand).

Of course,
I design this

I got this

Because Isotope change my item position to absolute (instead of relative) so my grid is broken.

Tell me if i’m not clear, i’m french so my english is… u know.

Thanks for help, i’ll check searchbarre with mixitup.

Hi, @admin_Sesame!

May I ask why do you need Grid for the Collection list? Same layout you can achieve by using flex and set item’s width to 50% instead of 100%. That might change the outcome.

Hi,

Thank’s for your help ! I used grid cause i prefer than flex usually but here you’re right, the “absolute” problem is solved : i got 2 column. But my items are still in absolute position.
But i got a new prob, here is what i design : Read-only

And here is the result : Website

Just a problem with collection-item width… I don’t know why isotope broke that much css, that was too beautiful !

The only way I could think of is adding some padding-right to the dynamic item while keeping it’s width 50% instead of 45-47. Although it still might not be exact layout that you want. :woman_shrugging:t3:

Yeah good idea, i don’t like to hack usually, but here it’s cool.
Thanks a lot, i put this in solved !