Tell us what you are trying to do?
I am using custom categories to filter a search. I want to use a Set of Checkboxes to select the categories for the filter. However, when I set this up, the category items are shown in one long column (50 US states), which is not visually pleasing. How can I set this up so that the category items are divided into multiple columns.
OR,
I tried to use the Select Multiple control, and this is better visually. The category items are limited to 10 visible items, and the entire list can be viewed by scrolling. However, the Ctrl/click for multi-select is not easy to use with a long list, as it is easy to forget something, or click incorrectly to clear the list requiring to start-over. Can the Set of Checkboxes be inside a scrollable list like the Select Multiple control? If so, how is this done?
Or is there another recommended solution?
What is the link to your site?
hidden link
Thank you.
Hi there,
I checked your website and I think there is a way to make the listing go to 2 or 3 columns.
First of all, make sure that the Grid element that you used to add the search have more space so that it can have more than one column.
Then I suggest that you add the CSS code below:
.wpv-custom-search-filter__input {
column-count: 2;
}
You can change the code to 3 if you want three columns.
Please kindly consider that this is completely a styling-related issue and we are limited to such support, we do our best to get you started but you will be the one to go forward and implement the rest yourself for your satisfaction.
Thanks.
Christopher,
Thanks for the prompt reply.
After I entered the support ticket, I tried to solve the problem by entering a Grid and setting # of columns. I do not have bootstrap on the site, but the Toolset Grid block seemed to work (theme is GeneratePress).
In the first column, I put a container and used the following CSS:
.scroll-box {
max-height: 240px; /* Set height of scroll box */
overflow-y: auto;
margin-bottom: 40px;
}
I then put the custom filter in this container and set to checkboxes. This seemed to work in creating the scrolling checkbox list that I wanted.
However, when I created the grid, I set to too many columns. The grid block will not let me reduce the number of columns. When I try to use the block controls to reduce the columns, the setting flashes and reverts back to the higher column count. I increased the column count from 6 to 7 and it worked. But, now it will not reduce from 7 columns.
Ideas on how to correct the column count?
Thanks.
Update.
I deleted the Toolset grid block since I was unable to reduce the number of columns.
i started using the GenerateBlocks grid block, and it allows me to increase or reduce the number of columns.
If you have a solution on the Toolset block, please let me know.
Thanks.
Hi there,
I'm glad that you managed to fix the issue. I checked my installation and there is no issue with the changing of the column numbers in the Grid block.
It might be something related to your installation that can be tested by checking for plugin or theme conflict:
- IMPORTANT STEP! Create a backup of your website.
- Go to "WordPress Dashboard > Plugins" and deactivate all plugins except Toolset and its add-ons.
- Check if you can still recreate the issue.
- If not, re-activate your plugins one by one and check the issue each time to find out the plugin that causes the problem.
But as you already managed to use the Gutenberg block I think you are good to go with the rest of your development.
Thanks.
Seems to be working with the GeneratePress grid block and CSS above for scroll-box. Thanks for the prompt reply and support!
