Forums › Forums › Search & Filter Pro › CSS Problem

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • 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 #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?

    Anonymous
    (Private)  May 20, 2020 at 10:48 am #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.

    Trevor
    (Private)  May 20, 2020 at 11:00 am #245079

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

    Anonymous
    (Private)  May 21, 2020 at 2:28 am #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.

    Trevor
    (Private)  May 21, 2020 at 12:30 pm #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?

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)