CSS Problem

Alvin Chau

#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.

Add New Note to this Reply

Trevor Moderator

#245057

Can 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?

Add New Note to this Reply

Alvin Chau

#245075

Hi Trevor,

I need the comboboxes for the controls so I can’t remove that.
Is there any way to show post per page dropdown like the combobox style but with no search option?

Thanks.

Add New Note to this Reply

Trevor Moderator

#245079

Yes, but you need to switch to the Select2 script, did you do that?

Add New Note to this Reply

Alvin Chau

#245208

Hi Trevor,

I choose the Script2 and it works but design wise it doesn’t look good. Anyways, is there any way to place one dropdown at the end of the page under the same filter id?

Thanks.

Add New Note to this Reply

Trevor Moderator

#245297

We 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?

Add New Note to this Reply

[Author]

Posts