angular / angular/components

Warning message (cdk-virtual-scroll-viewport): When no height is set.

Open
#26,133 0 comments 0 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

### Feature Description

I know this is a very insignificant "feature", but I think it will be helpful.

`` require fixed height to be set.
Without height it doesn't render any elements at all (even the html structure stays empty). This can be verry misleading and time consuming in some cases.
I just taked sandbox example with static data and modifyed it to take async data.
I was tired and spend few hours thinking about that is a bug in my code flow (timing, data refreshing or something else).
Today on a fresh mind I realize it's just because it has no height.

Maybe if you just `warn` the user to set height if there is no height or maybe set `min-height` = single element height. This can help to prevent others to make this mistake.

### Use Case

![image](https://user-images.githubusercontent.com/7819492/204823532-93cf3d6c-f705-45ca-9207-f9d6b92f8abb.png)
When we have data and no height - no html is rendered. If there is a `console.warn('there is no height man.')` will be very obviously and catchable.

Contributor guide

Open the contributing guide

Research direction

Start by locating the cdk-virtual-scroll-viewport component entry point and its existing tests. Reproduce the static-data case with no height, then trace how the viewport handles its initial dimensions. Done means the missing-height case gives users an obvious, catchable warning or another agreed-upon indication instead of silently rendering nothing.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.