Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Custom search filter

Tagged: 

Viewing 10 posts - 1 through 10 (of 28 total)
1 2 3
  • François Nantel
    (Private)  October 14, 2016 at 3:18 pm #64072

    Hi! I want to customize the search filter into 3 columns.
    Is there a way to do that?

    Actually, I use shortcode and I can’t find way to get what I want.

    Thanks!

    Trevor Moderator
    (Private)  October 14, 2016 at 3:52 pm #64089

    Bonjour François

    You want the results in 3 columns?

    Using the shortcode method you can modify the results.php template to your needs. You must first make a copy in your theme folder:

    https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

    If you have an example from your theme of an archives page that looks the same?

    François Nantel
    (Private)  October 14, 2016 at 3:55 pm #64091

    Thanks for your fast answer,
    I already customize my results (works like a charm)
    But now I have to customize the search field in 3 columns.

    Thanks

    Zach Anderson
    (Private)  October 14, 2016 at 6:10 pm #64115

    Not sure I’m understanding, but each field is wrapped in a list item (<li> tag) so you can use those to set up your columns via CSS.

    Something like 

    .searchandfilter > ul > li {
float: left;
display: block;
width: 33.33%;
}

    May get you started.

    François Nantel
    (Private)  October 14, 2016 at 6:18 pm #64119

    Only in the search option,
    I want the calendar (date post) in first column,
    some post meta in second one
    and the reset and submit button in the third one.

    Right now it all show in a same ul li…

    Maybe can I built a custom form by only call each search fields separately?

    Thanks

    Trevor Moderator
    (Private)  October 15, 2016 at 10:37 am #64183

    Bonjour François

    Can you show me the actual page with the search form on?

    And a mock up (image) of what you want it to look like (maybe using Photoshop)?

    François Nantel
    (Private)  October 17, 2016 at 1:17 pm #64503
    This reply has been marked as private.
    Trevor Moderator
    (Private)  October 17, 2016 at 4:29 pm #64554

    Ah, now I see what you want. Not very easy. You have 8 controls of different heights. It is possible to make them go in 3 columns across the page, but it may not look so nice.

    The first thing to fix is to have the radio buttons next to the labels of the event_options. This custom css should do that:

    .sf-field-post-meta-event_options label {display: inline !important;}

    Then make them all about the same width:

    .searchandfilter > ul > li {
  width: 33% !important;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}
.sf-field-post-meta-event_options input {width: auto !important;}
.searchandfilter ul {width: 100%;}
.searchandfilter ul > li input, .searchandfilter ul > li select {
  width: 100%;
}
.searchandfilter .meta-slider {max-width: 100% !important;}
    François Nantel
    (Private)  October 17, 2016 at 8:15 pm #64632

    Thanks!
    On my side I prefer to keep the order 😉

    .searchandfilter > ul {
	-webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

    Very nice plugin!

    François Nantel
    (Private)  October 17, 2016 at 9:03 pm #64654
    This reply has been marked as private.
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 28 total)
1 2 3

The topic ‘Custom search filter’ is closed to new replies.