Formatting questions

Anonymous

#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

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

Anonymous

#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

#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;
}

Anonymous

#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

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

Anonymous

#253105

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

Trevor

#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