This CSS snippet enables you to make Radio or Checkbox filters scrollable. It is useful when there are a lot of options in a filter. It utilizes the “Limit Height of Radio/Checkbox filters” option in our filter plugin and transform it into a scrollable list. You need to enable it in the Filter Item you are trying to make scrollable and then add this CSS class to the Filter module:
de_scrollable_filter_options
.
Scrollable Checkbox/Radio Fields
Details
Snippets Demo
Code
Description:
This code makes a radio/checkbox filter scrollable when "Limit Height of Radio/Checkbox filters" is enabled. The class "de_scrollable_filter_options" needs to be added to the Filter module for it to take effect.
Language: CSS
Where to add: Divi Theme Options
/* Make radio/checkbox filters scrollable */
/* Add the CSS class "de_scrollable_filter_options" to the Filter
module and enable "Limit Height of Radio/Checkbox filters" to the filter item you want to make scrollable. Don't forget to enter the height limit there */
.de_scrollable_filter_options .et_pb_de_mach_search_posts_item.limit_filters .limit_filter_text {
display: none;
}
.de_scrollable_filter_options .et_pb_de_mach_search_posts_item.limit_filters .et_pb_contact_field_options_list.divi-filter-item.limit_filter_cont {
overflow-y: auto;
}
Related Snippets
Easy | CSS
Limit Height of Post/Product Images in Loop Templates (no crop)
Feb 07 2025
Explore more from Divi Engine
Divi Form Builder
From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.
Divi Machine
Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.
Divi BodyCommerce
A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.
Divi Handoff
Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.
Divi Loop Extender
Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.
Divi Membership
Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.
Divi Machine Accounts
Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active
Divi Ajax Filter
Filter WooCommerce, Posts & Custom Posts without reloading the page.
Divi Mobile
Divi Mobile helps you create beautiful looking mobile menus without having to code.
Divi Nitro
Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.
Divi Protect
Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!
Divi Mega Menu
Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.