angular / angular/components

disable horizontal scroll in virtual scroller

Open
#15,288 2 comments 30 reactions 0 assignees View on GitHub
area: cdk/scrolling feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Please describe the feature you would like to request.
I would like an input for `cdk-virtual-scroll-viewport` directive which disabled the horizontal scroll, or in other words sets the width of `cdk-virtual-scroll-content-wrapper` to 100%, as opposed to just setting the min-width by default, to enable horizontal scrolling.

#### What is the use-case or motivation for this proposal?
Sometimes you have long list values and you want them to fit the width of your list and be displayed with ellipses, as opposed to having horizontal scroll. Because of how this component is implemented, putting the `min-width: 100%` in `cdk-virtual-scroll-content-wrapper` prevents me from limiting the width of the items by the parent's width.

#### Is there anything else we should know?
No.

Contributor guide

Open the contributing guide

Research direction

Start with the cdk-virtual-scroll-viewport directive and the cdk-virtual-scroll-content-wrapper styling described in the issue. Trace how the wrapper currently applies its minimum width and identify the input behavior needed to prevent horizontal scrolling. Done means long list values can fit the parent width and display ellipses without horizontal scroll.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.