Long expansion panel descriptions overflow the panel.
Nobody has claimed this yet.
- 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.
What is the current behavior?
If a description is long it will push the title out of place and overflow.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
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