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 › Formatting questions

Viewing 8 posts - 1 through 8 (of 8 total)
  • Beth Sandlin
    (Private)  July 15, 2020 at 11:17 pm #253004

    Hello there – I have two formatting questions:

    I set up my search to be with drop-downs that go horizontally across the page. I have 5 drop-downs, and then the submit button goes to the second line, even though I have the sizing go all the way across the page. Is there a way to make the submit button stay on the same line?

    Also, is there a way to style the button to make it look nicer?

    Trevor Moderator
    (Private)  July 16, 2020 at 11:27 am #253031

    It would be useful to see your search age, if you might share the link/URL with me?

    Some general comments. The dropdown boxes look better (especially on iPhones) if you change the fields to Comboboxes AND, in the Search & Filter plugin general Settings, change the Combobox script to Select2.

    The button can be styled with Custom CSS, so it depends what you want to do. We leave it relatively unstyled.

    Beth Sandlin
    (Private)  July 16, 2020 at 12:13 pm #253039

    Here’s the search page: https://trifectapilatesmembers.com/classes/

    I changed the fields to comboboxes – thank you. Those do look better. I’d love to get the submit button on the same line if possible on most desktop resolutions.

    If I put it on my widescreen, it does go to the same line but then it’s not vertically centered with the drop-downs.

    Do you have general CSS that you can share with me for a styled button? I can usually take it from there once I have something to start with. I tried some on my own but didn’t quite get there.

    Thank you for your help

    Trevor Moderator
    (Private)  July 16, 2020 at 4:54 pm #253086

    Hi, you also need to change the script to Select2. We will be moving to that as standard in our next major release, as Chosen is now abandoned. It is found here:

    https://www.screencast.com/t/swKsAD6kB

    Some CSS to start you off:

    .searchandfilter[data-sf-form-id="1133"] .sf-field-submit input {
    font-size: 14px;
    border-radius: 5px;
    padding: 3px 7px;
    border: 1px #a4a4a4 solid;
}
.searchandfilter[data-sf-form-id="1133"] .sf-field-submit:before {
    content: "";
    display: block;
    height: 32px;
    width: 25px;
}
    Beth Sandlin
    (Private)  July 16, 2020 at 5:36 pm #253094

    Do you have any suggestions to getting the button on the same line as the filters? When I used the free version, the filters were a little closer together so the button was on the same line

    Thank you for the code – I was able to modify it a little bit to what I needed.

    Trevor Moderator
    (Private)  July 16, 2020 at 6:02 pm #253097

    You have a lot of lost space between the fields which is causing that. Even with no space, at 1235px and below the button drops down. So, add 10px of space between them, and it would break at 1285px. A lot better than now (1583px), but still, pretty wide. You could reduce the minimum width on the fields. Setting the fields at 120/150/155/130/150px respectively, the form then breaks row at 1042px. Add in 10px of dividing space for each field and that means the breakpoint is 1092px. Nearly 500px better than now?

    Beth Sandlin
    (Private)  July 16, 2020 at 6:40 pm #253105

    How do you change the width of the fields and add in the 10px of dividing space?

    Trevor Moderator
    (Private)  July 16, 2020 at 6:54 pm #253110

    Something like this I think:

    .searchandfilter[data-sf-form-id="1133"] ul {
    padding-left: 0;
    display: table;
    margin: 0 auto;
}
.searchandfilter[data-sf-form-id="1133"] li {
    padding: 0;
    margin-right: 10px;
}
.searchandfilter[data-sf-form-id="1133"] li:last-child {
    margin-right: 0px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-length select.sf-input-select {
    min-width: 120px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-equipment select.sf-input-select {
    min-width: 150px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-focus select.sf-input-select {
    min-width: 155px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-level select.sf-input-select {
    min-width: 130px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-class_type select.sf-input-select {
    min-width: 150px;
}

    I am hoping select2 will then copy the widths over.

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

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