angular / angular/components

make mat-step-header header scrollable

Open
#15,181 6 comments 7 reactions 0 assignees View on GitHub
area: material/stepper feature P4
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 to see the mat-step-header made scrollable in a similar fashion to mat-tab. IOf you have multiple steps on a smaller resolution or inside a container with a specific width the steps simply overflow over the edge and would be better if you have a left/right scroll button on either side of the header like the mat-tab

#### What is the use-case or motivation for this proposal?
I have several apps that use the material stepper (specifically the horizontal stepper) where there are many steps in the flow, the stepper is usually displayed inside a mat-card with a specific width (responsive to difference screen sizes)

On smaller screen sizes where there are more steps than permitted on the screen the step headers simply overflow off the screen

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

This is a screen shot of one example on a large mobile (width: 425px)

screenshot 2019-02-13 at 18 38 30

Contributor guide

Open the contributing guide

Research direction

Start by comparing the horizontal mat-step-header behavior with the scrollable mat-tab header, focusing on how each handles many items in a narrow container. Confirm the expected behavior for the mobile screenshot and define done as preventing step headers from overflowing while providing usable left and right scrolling controls.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 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.