scrollable md-tabs: align active element to the middle
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript
Research direction
Reproduce the behavior in the linked md-tabs story with a scrollable tab set, then trace the component's scrollToTab function. Compare the current placement with the proposed centered scrolling behavior and verify that selecting tabs keeps the active tab centered without breaking scrolling on Chrome desktop and Android.
Written by the indexing model from the issue text.
Description
What is affected?
Component
Description
with scrollable md-tabs, when I click on a tab it is automatically placed at the end of the container.
I think the best way is to place it in the middle of the container
Reproduction
https://material-web.dev/components/tabs/stories/
Workaround
I tried to edit scrollToTab function by inserting this
tabToScrollTo.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
and it works pretty well
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
1.2.0
Browser/OS/Node environment
Chrome on Windows, Chrome on Android
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
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.
More from material-components/material-web
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
material-components/material-web#6014 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 55/100
material-components/material-web#6030 ·
-
Agent Skill Open
Difficulty 5/5 Over a week Newbie friendliness 20/100
material-components/material-web#5918 ·
-
Difficulty 5/5 Over a week Newbie friendliness 20/100
material-components/material-web#5894 · 12 reactions ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
material-components/material-web#5888 · 16 reactions ·
All issues in material-components/material-web
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
clerk/javascript#9852 ·
-
bug good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
amponce/archive-movie-browser#165 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
[Block] Latest Posts [Type] Bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
gitbutlerapp/gitbutler#15998 · 1 comment ·