Styling form

Anonymous

#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

Anonymous

#243220

This reply has been marked as private.

Anonymous

#243221

This reply has been marked as private.

Trevor

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

Anonymous

#243301

Thanks I have done this

Trevor

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

Anonymous

#243309

Search box less tall please – thanks Trevor

Trevor

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

Anonymous

#249867

This reply has been marked as private.

Trevor

#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