angular / angular/components

a wrong height style with cdk-virtual-scroll-spacer (cdk-virtual-scroll-viewport)

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

Description

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.0.3

### Description

After I updated angular material to 14.2.7 from 14.0.3 I start to get wrong height style with the div element that has the css class .cdk-virtual-scroll-spacer

### Reproduction

Steps to reproduce:
1. install the angular material 14.2.7
2. use the cdk-virtual-scroll-viewport

My Example code
```





```

### Expected Behavior

To get the correct style height on the div element that has the css class .cdk-virtual-scroll-spacer

### Actual Behavior

The div element that has the cs class .cdk-virtual-scroll-spacer get a style height which create a big space when I scroll to the end

### Environment

- Angular:
Angular CLI: 14.2.10
Node: 16.10.0
Package Manager: npm 7.10.0
OS: darwin x64

Angular: 14.2.12
... common, core

Package Version
-------------------------------------------------------------
@angular-devkit/architect 0.1402.10
@angular-devkit/build-angular 14.2.10
@angular-devkit/core 14.2.10
@angular-devkit/schematics 14.2.10
@angular/animations 14.0.3
@angular/cdk 14.2.7
@angular/cli 14.2.10
@angular/compiler 14.0.3
@angular/compiler-cli 14.0.3
@angular/forms 14.0.3
@angular/language-service 14.0.3
@angular/material 14.2.7
@angular/platform-browser 14.0.3
@angular/platform-browser-dynamic 14.0.3
@angular/platform-server 14.0.3
@angular/router 14.0.3
@angular/service-worker 14.0.3
@schematics/angular 14.2.10
rxjs 7.8.0
typescript 4.7.4

- CDK/Material: 14.2.7
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported cdk-virtual-scroll-viewport example with Angular CDK 14.2.7 and compare its .cdk-virtual-scroll-spacer height with version 14.0.3. Trace the virtual-scroll viewport and spacer behavior to identify the regression; done means scrolling to the end no longer creates an excessive blank space and the spacer height is correct.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.