angular / angular/components

Dialogue - overflow scrolling on small screens and margins

Open
#2,481 23 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: material/dialog P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

Bug, feature request, or proposal:

The current dialogue does not seem to support sizing and scrolling on smaller screen sizes / small devices. This was possible on the material 1 dialogue. If the vertical height of the screen was incredibly small scrollbars would appear see this screenshot:

image

With version 2 - the dialogue is pushed off the screen and no scrollbars ever appear in the middle. It does not maintain any margins on the top or bottom.

image

Maybe there is this a means this can be achieved but the examples are quite primitive.

What is the expected behavior?

When screen is decreased in size scrollbars should appear for the content.

What is the current behavior?

The current dialogue is pushed off the screen with no margin at the top or bottom. The content remains the same size

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
https://plnkr.co/edit/DrI42Su0v6OntJkjUNOI?p=preview

What is the use-case or motivation for changing an existing behavior?

The current modal is only useful for very simple use cases.

Which versions of Angular, Material, OS, browsers are affected?

Latest.

Is there anything else we should know?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Plunker reproduction and inspect the Angular Material dialogue behavior on small viewport heights. Compare the current version with the described Material 1 behavior, focusing on vertical margins and content overflow. Done means the dialogue remains within the viewport and its content becomes scrollable when the screen is too short.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.