[Resolved] Search and filter within page?

Home Forums Support Search and filter within page?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1668990
    Tomas

    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?

    #1669021
    David
    Staff
    Customer Support

    Hi there,

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

    #1669073
    Tomas

    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.

    #1669306
    David
    Staff
    Customer Support

    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.

    #1669331
    Tomas

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

    #1669342
    David
    Staff
    Customer Support

    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.

    #1669356
    Tomas

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

    I really appreciate your help.

    #1670218
    Tomas

    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? πŸ™‚

    #1670361
    David
    Staff
    Customer Support

    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

    #1670417
    Tomas

    Okey i’ve added the class to the inner containers and the script is working fine πŸ™‚

    #1670507
    David
    Staff
    Customer Support

    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

    #1670520
    Tomas

    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?

    #1670528
    David
    Staff
    Customer Support

    Yeah – i would think so πŸ™‚

    Glad to be of help!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.