Edit field boxes

Anonymous

#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

#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

#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

#113083

Hi

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

And then get back to me?

Anonymous

#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

#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

#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

#113093

Sorry, that was my bad!

The revised CSS:

#mpcth_content_wrap {clear: both;}

I did not see that it was an ID.

Anonymous

#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

#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