angular / angular/components

Long expansion panel descriptions overflow the panel.

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

Description

#### Bug, feature request, or proposal:
If you have a longer than normal expansion panel description it overflows over the expansion panel and pushes the label out of place.

#### What is the expected behavior?
The description should truncate and add an ellipses, or some other way to gracefully hand this situation.
![image](https://user-images.githubusercontent.com/15903970/38444420-b45c78c6-39b4-11e8-8bc7-ad6012abaa88.png)

#### What is the current behavior?
If a description is long it will push the title out of place and overflow.
![image](https://user-images.githubusercontent.com/15903970/38444346-747306bc-39b4-11e8-9014-e50ef2edae80.png)

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-fcxlsc?file=app/expansion-overview-example.html

#### What is the use-case or motivation for changing an existing behavior?
It looks pretty bad if a long description is used.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Tested on Angular Material 5.2.4 using chrome 65.0.3325.181 and firefox 59.0.2.

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, specifically app/expansion-overview-example.html, using a long expansion-panel description. Then locate the Angular Material expansion-panel implementation and verify that the description no longer overflows or displaces the title, with graceful truncation or another clear treatment as the finished behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.