-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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
Does Tab component attempt to hide vertical scrollbar? Does it work for you? #14706
Comments
The Tabs' scrollbar shouldn't be visible. How can we reproduce the problem? |
Well, the provided codesandbox is a reproduction for me. I see scrollbar there. My coworker on chrome 72 on MacOS has seen scrollbars even on material-ui demo website. Also to be clear: I see scrollbar only while I am scrolling. Not on first render of webpage. Potential fix: What seems to work as a crude quick fix was setting this properties in css: This makes scrollbar have constant width, which makes Or even simpler set for scrollable element: .scrollable::-webkit-scrollbar {
-webkit-appearance: none;
width: 0;
height: 0;
} |
@mpodlasin Interesting. I might know what's going on. MacOS has a smart scrollbar display logic. It's enabled by default but you can change it in the main settings: I'm using the nondefault option that reproduces the Windows behavior: the scrollbar is always visible and has its own width. I have changed it as its the most common behavior. It helps me find scroll issue sooner. We are measuring the scrollbar width in order to hide it: https://github.com/mui-org/material-ui/blob/c0287df54346221af06a5fea860a9d2e58e0f2d1/packages/material-ui/src/Tabs/Tabs.js#L127 It doesn't work in your case. I think that we can move your CSS code in the core. What do you think about it? |
|
I have visible scrollbars as well, in the situation when Tabs rendered in hidden container and then by controlling visibility of parent element
|
@oliviertassinari Thank you for fast response, indeed this looks related to #14077. I ended up controlling visibility with
|
@oliviertassinari Would be happy to add it, can you please point to the best place to start with? Thanks. |
@Romanior It depends on what you mean. If you are referring to this issue resolution, what I have in mind is: --- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -36,6 +36,10 @@ export const styles = theme => ({
display: 'inline-block',
flex: '1 1 auto',
whiteSpace: 'nowrap',
+ '&::-webkit-scrollbar': {
+ appearance: 'none',
+ height: 0,
+ },
},
/* Styles applied to the tablist element if `!variant="scrollabl. */
fixed: { If you are referring to the customzation demo, I was thinking of this demo: https://next.material-ui.com/demos/tabs/#customized-tabs. There is a couple of more customizations here https://mui-treasury.com/components/tabs, but none match the Bootstrap version like yours :). |
@oliviertassinari I could replicate the issue of a visible scrollbar at https://material-ui.com/demos/tabs/#automatic-scroll-buttons I tried cross-browser vendor prefixed styling scrollable: {
overflowX: 'scroll',
/* Hidden scrollbar vendor prefixed. */
msOverflowStyle: 'none',
overflow: '-moz-scrollbars-none',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none'
},
} it fixed it on all browsers |
@Umerbhat It sounds like you can submit a pull request :). |
this work for me, thanks |
I am using Chrome on MacOS.
On MaterialUI demo website, when I scroll tabs left and right, I DON'T see the vertical scroll.
https://material-ui.com/demos/tabs/#scrollable-tabs
And yet in all other examples (codesandbox, using component in own application) I can see the scrollbar. What baffles me is this inconsistent behaviour. What magic causes it? What makes matters worse is that some of my coworkers can see the scrollbar on their computers and others don't.
https://codesandbox.io/s/jjrkjopn8v
What's more, after digging into Tabs source code, I have seen that there is an attempt to measure scroll size. Does it work for you?
https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Tabs/ScrollbarSize.js
My questions:
So what is overall status of scrollbar on Tabs component? Is presence of visible scrollbar considered a bug, or do we accept it?
Does anyone also get inconsistent behaviour where you don't see scrollbar in official demo but see it in codesandbox? Does anyone have any ideas what may cause it?
The text was updated successfully, but these errors were encountered: