Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollable Tabs not work when user scale display settings to 125% #11624

Closed
EricPing opened this issue May 29, 2018 · 6 comments · May be fixed by nbv1982/material-ui#10 or hzhz/material-ui#96
Closed
Labels
bug 🐛 Something doesn't work component: tabs This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@EricPing
Copy link

Problem

I am having some problems with Scrollable Tabs.
Some users change their display settings, scale from 100% to 125%, and when user clicks the next button on Scrollable Tabs, the tabs will go back to original position.

test

My users' environment

Tech Version
Windows 10
Material-UI 1.1.0
Browser Google Chrome 66.0.3359.181
Screen Resolution 1920x1080

Thanks!

@shahzad31
Copy link

i am also facing some issues with tab selector which appears below selected tab, when page resizes it's size remains the same even though tab works perfectly, i will try to post example tomorrow here...

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: tabs This is the name of the generic UI component, not the React module! labels May 29, 2018
@oliviertassinari
Copy link
Member

Yes, please, can you share a reproduction :)

@mlogan
Copy link

mlogan commented Jul 5, 2018

This reproduces on the Material UI demo page, in chrome, with display zoom set to 125%

  • Go to chrome://settings -> Appearance -> Page Zoom -> Set to 125%
  • Navigate to https://material-ui.com/demos/tabs/
  • Scroll down to the "Automatic scroll buttons demo"
  • Click the scroll button on the right.
  • The tabs will scroll right, then back to the original position.
  • You can work around this by first selecting the right-most visible tab, then clicking the scroll button.

I tested these steps on Mac and Linux.

@oliviertassinari oliviertassinari self-assigned this Jul 22, 2018
oliviertassinari added a commit to oliviertassinari/material-ui that referenced this issue Jul 22, 2018
@oliviertassinari oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Jul 22, 2018
@oliviertassinari
Copy link
Member

Thanks for reproduction instructions! @novascreen has found a nice workaround #10826 (comment).

@oliviertassinari oliviertassinari removed their assignment Jul 22, 2018
oliviertassinari added a commit to oliviertassinari/material-ui that referenced this issue Jul 22, 2018
oliviertassinari added a commit to oliviertassinari/material-ui that referenced this issue Jul 22, 2018
oliviertassinari added a commit to oliviertassinari/material-ui that referenced this issue Jul 22, 2018
@michael-ecb
Copy link

Sorry but continue to happen after updated to 1.4.1...
Its specified that it's included in this version (CHANGELOG.md)

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 26, 2018

@michael-ecb It wasn't released.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tabs This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
5 participants