Make all the display fields the same width?

Anonymous

#254912

I have 3 Taxonomy fields. Each uses multi-select and has a combo box. But when the user sees the display, 2 of the fields are the same width, but the 3rd is much longer width on the screen.

How can I make all 3 fields the same width on the screen? I see the combobox makes long items on 2 lines, so it should not matter the length of items within each field, right? So is there a way to make these fields the same width?

Trevor

#254917

Can you go to wp-admin -> Search & Filter -> Settings -> Combobox Script

Change this from Chosen to Select2 – we’re dropping support for Chosen in v3, because it has too many issues on mobile.

Then are you able to send me a live link/URL to your search page so I can take a look?

Please note that we are now closed for the day as it is gone 5PM here in the UK. For any further replies, I will be back on again tomorrow.

Anonymous

#254951

This reply has been marked as private.

Trevor

#254999

I think this custom CSS makes it look better?

.searchandfilter[data-sf-form-id="5450"] {
  padding: 20px;
}
.searchandfilter[data-sf-form-id="5450"] > ul {
  margin: 0;
}
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="daterange"] label,
.searchandfilter[data-sf-form-id="5450"] .select2-container {
  min-width: 100%;
}

Anonymous

#255019

Superb! Many thanks for your great help! It would be fantastic to see all these types of snippets located in some place on your site!

Pls close this ticket

Trevor

#255021

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts