Scrollable Checkbox/Radio Fields

Easy

CSS

Machine, BodyCommerce, Ajax Filter

Details

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
.

Snippets Demo

Code

1

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

Place the Filter Reset Button inline with the Filter Fields

Nov 14 2024

Machine BodyCommerce Ajax Filter

Easy | CSS

How to Align the Search Button in Divi Engine Filter: A Simple CSS Snippet

Aug 27 2024

Machine BodyCommerce Ajax Filter

Easy | CSSJavascript

Implementing a Lightbox for ACF Images in Your WordPress Site

Jul 10 2024

Machine

Intermediate | PHP

Customize WooCommerce Variation Text

May 22 2024

Easy | CSS

Limit the Divi BodyCommerce PP Gallery Module Height

Apr 09 2024

BodyCommerce

Easy | CSS

Change the Google Map Cluster Icon in Divi Machine Multi-Pin Maps

Mar 19 2024

Machine

Easy | CSS

Numerical Indexing for Repeated Fields in the Divi Machine Repeater Module

Feb 29 2024

Machine

Easy | CSS

Make Your Divi Ajax Filter Sticky on Mobile Devices

Feb 21 2024

Machine BodyCommerce Ajax Filter

Intermediate | CSS

Reverse Loop Layout Columns

Jan 22 2024

Machine

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.

Find out more

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Find out more

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Find out more

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Find out more

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