This thread is resolved. Here is a description of the problem and solution.
Problem: I have a series of search filters displayed as checkboxes. The checkboxes are displayed in a single column with several rows. Instead, I would like to display the checkboxes in a single row with multiple columns. If I inspect the checkbox containers I can see they are set to display:inline-block; but they break to separate rows. How can I display the checkboxes in a single row?
Solution: Use custom CSS to override the default layout styles for the checkbox elements. In this case, applying display:flex to the checkboxes container element is sufficient to implement the flexbox model and display the filters in a single row with multiple columns.
Relevant Documentation:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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 3 replies, has 2 voices.
Last updated by 3 years, 6 months ago.
Assisted by: Christian Cox.
I have a search page that will show the results for a custom taxonomy. The type of control is 'set of checkboxes'. This displays the results in a column format, one under the other (see attached image). I am trying to get them to display in one line, next to each other.
On inspecting the element, it shows the classes .wpv-custom-search-filter-label-bottom .wpv-custom-search-filter__input, .wpv-custom-search-filter-label-top .wpv-custom-search-filter__input have display:inline-block;
Are you able to advise me how to get them inline?
Okay the ancestor .form-group div establishes the flexbox model for its descendents, as you can see in the inspector (screenshot attached, see the "flex" indicator in the DOM inspector next to .form-group ancestor div). The two direct descendants are the "Filter by" label and the span container for the checkboxes. You should add display:flex on the span container to establish the flexbox model for its direct descendent elements, then manipulate the flex properties of the checkbox descendent elements to achieve columns. Add the following CSS to the View to set display:flex on the span container:
.wpv-custom-search-filter-label-bottom .wpv-custom-search-filter__input, .wpv-custom-search-filter-label-top .wpv-custom-search-filter__input {
display: flex;
}
That will bring the checkbox descendants into one row. You may need to add some margins/padding to the individual elements to achieve the desired, something like this:
.form-check {
padding-right: 15px;
}
.form-check-label {
margin-left: 5px;
}
If you'd like a quick guide for using the flexbox design model, check out this CSS Tricks article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
