Forums › Forums › Search & Filter Pro › Edit field boxes

Viewing 10 posts - 1 through 10 (of 19 total)
1 2
  • Anonymous
    (Private)  June 4, 2017 at 8:50 am #113076

    Hi there,

    I made up a form and added it to my product category page at the header section. Each search field displays underneath eachother – here is a screenshot: https://ibb.co/nqcD3F is there a way for them to appear side by side? Here is a mockup screenshot: https://ibb.co/bLDLiF

    Thanks

    Trevor
    (Private)  June 4, 2017 at 9:30 am #113077

    This would typically require custom CSS, and so being able to see a live link/URL would help, but the core CSS would look like this:

    .searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}
    Anonymous
    (Private)  June 4, 2017 at 9:43 am #113079

    Wow, thankyou for your quick reply. I have made a live link: http://www.redroseinvitations.com.au/wordpress/product-category/invitations/wedding-and-engagement/

    Is the a way to expand the text and boxes so that it is readable: https://ibb.co/k4uCVv

    Once one option is selected, it automatically expands the boxes: https://ibb.co/iDB9Av

    Thanks : )

    Trevor
    (Private)  June 4, 2017 at 9:47 am #113083

    Hi

    In WP Admin -> Search & Filter -> Settings can you change Chosen to Select2?

    And then get back to me?

    Anonymous
    (Private)  June 4, 2017 at 9:52 am #113087

    Thanks, I have changed it, screenshot here: https://ibb.co/bCkaiF

    Not sure if this is right, I added the code to “scripts and stlyes” – screenshot here: https://ibb.co/dew4ca

    Trevor
    (Private)  June 4, 2017 at 10:01 am #113089

    OK, next thing (the CSS is in the correct place, BTW), change this:

    .search-filter-results {clear: both;}

    to this:

    .mpcth_content_wrap {clear: both;}
    Anonymous
    (Private)  June 4, 2017 at 10:09 am #113091

    no problems, I have changed that code, 2 questions if I can ask please;
    – Can the description text be above or below the form: https://ibb.co/nihSxa
    – can the responsive version have an expandable box? https://ibb.co/nndZca

    Thanks

    Trevor
    (Private)  June 4, 2017 at 10:12 am #113093

    Sorry, that was my bad!

    The revised CSS:

    #mpcth_content_wrap {clear: both;}

    I did not see that it was an ID.

    Anonymous
    (Private)  June 4, 2017 at 10:17 am #113097

    Thankyou : )

    Dont mean to be a pain but is it possible to make the boxes smaller in width, to look more like this: https://ibb.co/bLDLiF

    Trevor
    (Private)  June 4, 2017 at 10:27 am #113099

    I believe it is your theme that is doing this, with this CSS (the width: 220px bit):

    select {
  color: #737171;
  font-size: 14px;
  padding: 5px;
  width: 220px;
}

    So, the first thing is to undo that for the search form, and then set a minimum width for each control:

    .searchandfilter select {
  width: auto !important;
}
.searchandfilter li.sf-field-taxonomy-product_tag select.sf-input-select {
  min-width: 150px;
}

    Where the sf-field-taxonomy-product_tag is the class name of that control (you can see this if you inspect the page using the browser inspector).

    I can’t test this here, as the Select2 script adds the CSS when the page is made.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 19 total)
1 2