Forums › Forums › Search & Filter Pro › CSS Problem
- This topic has 5 replies, 2 voices, and was last updated 4 years, 5 months ago by Trevor.
-
Anonymous(Private) May 20, 2020 at 4:25 am #245012
Hi,
My filtering form has some CSS problem. Please check the below link:
https://www.lightemsystems.com/telecom-datacom-systems/industrial-switch/Post per page i.e. View dropdown is not same as other dropdown design.
CSS code I used:.searchandfilter > ul > li {
display: inline-block;
margin-right: 15px;
float: left;
}
.searchandfilter[data-sf-form-id=”10523″] select,
.select2-container .select2-results__option,
.searchandfilter[data-sf-form-id=”10523″] .select2-container–default .select2-selection–single .select2-selection__rendered {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: grey;
border-color: grey;
}
.searchandfilter >ul > li input[type=submit] {
background-color: #1569ae; /* Blue */
border: 4px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
font-size: 12px;
}Please help me.
Trevor(Private) May 20, 2020 at 9:58 am #245057Can you first change the combobox script that S&F is using, and remove that CSS and let me know when done?
Change the combobox script to Select2 (there is an option in our settings page to choose which Combobox script to use). Your current form uses Chosen, which is set within our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.
Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.
Do you need these controls to be comboboxes:
https://www.screencast.com/t/s83eHGRPM
Or was that for styling reasons? If it was for styling reasons, do they need the search box at the top?
Trevor(Private) May 21, 2020 at 12:30 pm #245297We are taking this one step at a time, and so far, all is good.
Now we need to add some javascript to the page. If you have no means to do this, you could use this plugin (using this plugin you do not need the
<script></script>
tags):https://wordpress.org/plugins/custom-css-js/
This is the JavaScript for your form:
<script> (function ( $ ) { $(document).on("sf:ajaxfinish", ".searchandfilter", function(){ $('.sf-field-posts_per_page select.sf-input-select').select2({minimumResultsForSearch: -1}); }); }(jQuery)); jQuery(document).ready(function($){ $('.sf-field-posts_per_page select.sf-input-select').select2({minimumResultsForSearch: -1}); }); </script>
After adding this, the Post per Page field should look like the others.
I am not sure what you mean when you ask:
Q. Is there any way to place one dropdown at the end of the page under the same filter id?
-
AuthorPosts