Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Styling form

Viewing 10 posts - 1 through 10 (of 10 total)
  • contact6536
    (Private)  May 9, 2020 at 2:36 pm #243219

    Hi, please could you suggest css for how to make my form look better, please? I’m thinking having the boxes the equal widths, and the pink Search and Reset buttons on a separate line at the bottom (together). Thanks very much

    contact6536
    (Private)  May 9, 2020 at 2:38 pm #243220
    This reply has been marked as private.
    contact6536
    (Private)  May 9, 2020 at 2:45 pm #243221
    This reply has been marked as private.
    Trevor Moderator
    (Private)  May 11, 2020 at 8:20 am #243252

    Could you first 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.

    Let me know when that is done?

    contact6536
    (Private)  May 11, 2020 at 12:38 pm #243301

    Thanks I have done this

    Trevor Moderator
    (Private)  May 11, 2020 at 12:41 pm #243305

    Do you want the other fields to be taller, the same as the search box, or for the search box to be less tall?

    contact6536
    (Private)  May 11, 2020 at 12:57 pm #243309

    Search box less tall please – thanks Trevor

    Trevor Moderator
    (Private)  May 12, 2020 at 11:13 am #243521

    This should start you on your way:

    .searchandfilter[data-sf-form-id="971"] li.sf-field-search input {
  padding: 1.5px 10px;
}
.searchandfilter[data-sf-form-id="971"] > ul > li,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="971"] .select2-container {
  min-width: 245px;
  float: left;
}
.searchandfilter[data-sf-form-id="971"] > ul {
  display: table;
}
.searchandfilter[data-sf-form-id="971"] li.sf-field-submit {
    clear: both;
}

    Note that you have some CSS you already made:

    input.sf-input-text {
    background-color: white;
    border: 1px solid #aaa !important;
    margin-top: 3px;
    font-size: 14px;
}

    The font-size and margin-top in that block may need to be removed. It may also be that you need to place the CSS in a media query to apply only to desktop, but this should get you started. This is really outside the scope of our normal support, so if you need more doing, you may need to hire a third party coder to help you.

    contact6536
    (Private)  June 24, 2020 at 12:03 am #249867
    This reply has been marked as private.
    Trevor Moderator
    (Private)  June 24, 2020 at 12:38 pm #249905

    I think this would do that for you:

    .searchandfilter[data-sf-form-id="971"] > ul > li.sf-field-submit,
.searchandfilter[data-sf-form-id="971"] > ul > li.sf-field-reset {
  min-width: auto;
}
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

The forum ‘Search & Filter Pro’ is closed to new topics and replies.