Make the list of elements scrollable

Created on 8 May 2025, 4 days ago

Problem/Motivation

When a facet contains a large number of links and checkbox items, even with the "Show more" functionality ( Add a Soft Limit option Active ) configured, users are presented with an expanded list that can be overwhelming and difficult to navigate. This creates a poor user experience as users must process a lengthy list of options. Additionally, the expanding list causes layout shifts on the page, which can be disorienting for users. Adding a scrollable container to the facet would maintain a consistent height while still providing access to all options, preventing layout shifts and improving usability.

Steps to reproduce

  1. Create a view with Better Exposed Filters
  2. Configure a taxonomy or other filter with many options (20+ items)
  3. Enable the "Show more" option in BEF settings
  4. View the page and click "Show more" to expand the list
  5. Notice how the expanded list pushes other content down the page and creates a very long form

Proposed resolution

Add a configurable option in the Better Exposed Filters settings to make filter option lists scrollable. This would include:

  1. A new checkbox option in the BEF settings form to enable scrolling for specific filters
  2. A configurable height setting (in pixels or em) for the scrollable container
  3. CSS implementation that wraps the filter options in a container with:
    • Fixed height based on the configured value
    • Overflow-y: auto to enable vertical scrolling

The implementation should maintain all existing functionality (like "Show more/less" toggles) while adding the scrollable container.

Remaining tasks

User interface changes

API changes

Data model changes

Feature request
Status

Active

Version

7.1

Component

Code

Created by

🇭🇺Hungary mxr576 Hungary

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024