How to edit the form

Anonymous

#99690

I have one small question. My website is: http://www.knappekoppen.work.

As you can see, the select boxes are now beneath each other. I want them to be next to each other, at the same line.

Also, I want to put “<div class=”select-style”>” before “<select>” and “</div>” after “</select>”.

How can I do this?

Anonymous

#99693

Edit: I would like to have the select boxes on the same line as the word ‘vacatures’. ‘vacatures’ should be aligned left en the boxes on the right.

Anonymous

#99701

Other question: is there a possibility to divide the portfolio products automatically over several pages? For example 10 products per page.

Anonymous

#99710

Edit edit: excuse me, the select boxes will be BENEATH ‘vacatures’. The three boxes should be at the same line, centered.

Trevor

#99716

Hi Jasper

That’s a lot of quick questions 😉 Can I number them 1-4?

#3 You seem to have done this, by setting post per page to 10, on the General Settings tab? It might look better with 12 though?

#4 supersedes #2, yes?

And that leaves us with #1. Which is actually two questions, I will call 1A and 1B

1B is not possible with this version of Search & Filter Pro, but will be possible in some months when we release V3.

1A. You need some simple Custom CSS to do this:

.searchandfilter ul li {
  display: inline-block !important;
  margin-right: 20px;
}
.searchandfilter ul li:last-child {
  margin-right: 0;
}

Anonymous

#99730

Thanks very much for your reply! All questions are answered.

Considering answer 1B: is there another way to edit the CSS of the select boxes as in this example https://coderwall.com/p/w7npmq/fully-custom-select-box-simple-css-only?

Trevor

#99734

As they have divs around them, it isn’t possible to do that until V3. However, you can set them as Comboboxes and in the plugin settings choose Select2 from the choices. That would make them much nicer and give you more flexibility with Custom CSS.

Anonymous

#99751

Thanks again! It worked perfectly. One question (again ;-)):

http://www.knappekoppen.work. The last thing I want to do is to change the font-family of all the options. I tried this:

.sf-level-0 { font-family: 'Open Sans'!important; }

…but this doesn’t work! It’s now Times New Roman and I want it to be ‘Open Sans’.

Thanks!

Anonymous

#99815

Sorry, two more questions (last ones, I promise 🙂 ):

1) Is there any possibility to delete the textbox in the combobox (the box in which you can type what you’re looking for? And if not: Can I change the text “No results found” into my own language?

2) If I open the combo boxes on my mobile to see the options, I automatically zoom in on my screen a little bit. How can I make sure this does not happen?

Trevor

#99856

OK

The class for the Select2 dropdown elements is select2-results__option and not sf-level-0.

Hide the box:

.searchandfilter .select2-search.select2-search--dropdown {display: none;}

I am not sure what might cause the zoom. Maybe hiding the search box will fix that.

[Author]

Posts