angular / angular/components

Dialog with fixed height less than 100% has 2 scrollbars

Open
#6,584 13 comments 14 reactions 0 assignees View on GitHub
area: material/dialog P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug

#### What is the expected behavior?
Dialog with fixed height, that is less than 100% to have only one scroll bar - for content section.

#### What is the current behavior?
Dialog has 2 scrollbars - 1 for content and 1 for the whole dialog.

#### What are the steps to reproduce?
https://plnkr.co/edit/1teyLZLR7MVsrZLPD94V?p=preview

#### What is the use-case or motivation for changing an existing behavior?
2 scrollbars is weak user-experience.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Browsers: Chrome (Windows 10, Lunix Ubuntu 16.04 LTS), IE11 (Windows 10)
Material: 2.0.0-beta.6, 2.0.0-beta.8
OS, Typescript - not applicable

#### Is there anything else we should know?
Probably the same is applicable to fixed width, but lets not noise the issue with it.

Contributor guide

Open the contributing guide

Research direction

Start with the linked Plunker reproduction and the Material dialog implementation. Confirm the two-scrollbar behavior for a fixed height below 100%, then verify that the dialog has only the content scrollbar in the affected browsers.

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.