Skip Navigation

[Resolved] Search forms do not look good without Bootstrap

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to modify the design of long lists of checkboxes in custom search Views.

Solution: If changing checkboxes to select fields is not acceptable, you can make the checkboxes appear in a more horizontal format by adding some custom CSS:

.checkbox {
display: inline-block;
}
 
.checkbox + .checkbox {
margin-left: 20px;
margin-bottom: 20px;
}

You could also wrap the checkboxes fields in a div with a set height and add vertical scrolling, which would conserve vertical space. You could put all or some of the filters in a collapsible panel that can be hidden.

This support ticket is created 6 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 11 replies, has 2 voices.

Last updated by CharlesB2907 6 years ago.

Assisted by: Christian Cox.

Author
Posts
#1146011

Hi Christian,

It was implied that the forms would "look good out of the box" even without Bootstrap but this isn't so.

Thank you.

#1146071

What would you like to change?

#1146142

Hi Christian,

Thank you for getting back. I was referring to the fact the the form is currently in pure html without basic styling. I'm trying to divide the current form into three columns and make it look a little more attractive. I'm trying to get the client to agree to replacing the two checkbox fields with drop-down selector fields to reserve space.

I would like as much input on this as possible. I am very close to getting this project finished. However, this same issue is being addressed by one of your associates and I don't want to violate support policy.

#1146530

If changing checkboxes to select fields is not acceptable, you can make the checkboxes appear in a more horizontal format by adding some custom CSS. I can help tweak it some if necessary.

.checkbox {
display: inline-block;
}

.checkbox + .checkbox {
margin-left: 20px;
margin-bottom: 20px;
}

You could also wrap the checkboxes fields in a div with a set height and add vertical scrolling, which would conserve vertical space. You could put all or some of the filters in a collapsible panel that can be hidden.

#1146578

Hi Christian,

Thank you for the interesting suggestions. The current checkbox system allows for multiple options to be chosen. Is there a way to edit and limit the existing field to permit a single selection only?

#1146660

Checkboxes filters allow multiple selections, and I don't have a way to change that behavior. If you don't want to allow multiple selections, you can change the filter display type to "radio" or "select" instead of "checkboxes". This will prevent multiple option selections within a single custom field filter. You can manually modify the current filter shortcodes to choose a different display type, or you can delete the checkboxes filter shortcodes from the Search and Pagination editor and add them again. In the popup you will be able to select a different filter display type, even if the field is stored as a checkboxes group in wp-admin.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-control-postmeta
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-control-post-taxonomy

#1146766

Hi Christian,

Thank you for this valuable information that I will note and bookmark. However, I was able to consult with the client and we chose to change the two-color field types to selector fields which provides for a more streamlined form layout.

Now the only thing that remains is to confirm the search function of the fields and the CSS styling.

#1146989

Hi Christian,

Is it possible to remove or hide the "Uncategorized" option in the Category field?

#1147294

WordPress likes to have a default category, so if you want to remove it permanently you would have to go to WordPress > Writing and change the default post category to something else, already in use. Then make sure no posts anywhere have the Uncategorized term selected. Finally go to wp-admin > Posts > Categories and delete the Uncategorized term.

#1147350

Hi Christian,

I followed your instructions up to the point of attempting to delete the term which when attempted displayed a note indicating the the term could not be deleted.

I replaced the field title with e "." which does appear in the drop down but maybe not as distracting. I see how this goes.

I appreciate your help on this. Thank you.

#1147410

I will stand by for your update.

#1151710

My issue is resolved now. Thank you!