[Resolved] Search and filter within page?

[Sebastian]

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?

[David]

Hi there,

can you link me to a page on the actual site where i can see the issue ?

[Sebastian]

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.

[David]

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.

[Sebastian]

Wow, thank you so much. I would love your help.
Is there anything you need from me?

[David]

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.

[Sebastian]

Working in Europe, Office is closing. Will do that tomorrow morning and get back to you!

I really appreciate your help.

[Sebastian]

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? 🙂

[David]

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

[Sebastian]

Okey i’ve added the class to the inner containers and the script is working fine 🙂

[David]

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

[Sebastian]

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?

[David]

Yeah – i would think so 🙂

Glad to be of help!

[Author]

Posts