Archived topic
Search and filter within page?
12 replies · Started by Sebastian on February 23, 2021
We are trying to implement a sarch and filter function on our page, like this search/filter function:
Search/filter function.
I've managed to make it work with custom Jquery/JS but my content won't float to the left when i use generatepress and generateblocks. It works perfectly fine using regular HTML. I've been using this code: http://jsfiddle.net/jamen/mttgj1tt/8/
Is there a way to make the float function to work with GP & GB?
Hi there,
can you link me to a page on the actual site where i can see the issue ?
Here's the site: http://verko.se.k78.itc.se/agenturregistret/
Right now it's just the content starting with the letter A that has the CSS rules applied to it.
Ok so two issues:
1. The GB Grid Container uses Flexbox so Floats won't work.
2. Each container block which has the connect-cat class sits inside a gb-grid-column wrapper which defines the column width .... theres no way to manually add a class to those wrappers. Which makes it tricky to do this.
The only way i can see this is to create your own grid wrapper.
That would require creating a Container Block and inside add a number of stacked Containers for each of your 'cards'. Then it will take a little CSS - happy to help with that if you want to set it up.
Wow, thank you so much. I would love your help.
Is there anything you need from me?
If you can set the page up so its structure is:
Container Block ( as a wrapper ) and inside just add an individual Container Block for each of your 'cards'... so when viewed you will just have a stack of 100% wide containers inside one parent container block.
Working in Europe, Office is closing. Will do that tomorrow morning and get back to you!
I really appreciate your help.
Hi David!
The page structure is done! http://verko.se.k78.itc.se/agenturregistret/
I hope i did it right. I did notadd the 'connect-cat' class to the inner containers.
Whats next? :)
You need the connect-cat classes on the inner containers :) Add some, and check that the script still works and filters the list. Then let me know and ill work on the grid CSS
Okey i've added the class to the inner containers and the script is working fine :)
Nice !
Now add this CSS:
.gb-container.connect-wrapper > .gb-inside-container {
display: flex;
flex-wrap: wrap;
}
.gb-container.connect-wrapper .connect-cat {
flex: 1 0 calc(33% - 20px);
margin: 10px;
}Then select the parent container and give it a CSS Class of: connect-wrapper
Wow!!
thank you so much for your help. It works perfectly!
I really appreciate your help and your work.
So i guess i can add the content for the letter b and c and so on in the same parent container?
Yeah - i would think so :)
Glad to be of help!
