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

Tabs fullWidth inconsistent with default CSS #11947

Closed
2 tasks done
jeffwillette opened this issue Jun 22, 2018 · 5 comments
Closed
2 tasks done

Tabs fullWidth inconsistent with default CSS #11947

jeffwillette opened this issue Jun 22, 2018 · 5 comments
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

@jeffwillette
Copy link
Contributor

jeffwillette commented Jun 22, 2018

  • This is a v1.x issue (v0.x is no longer maintained).
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The Tab component has a fullWidth prop, but the default maxWidth in the component implementation is set to 264px
https://github.com/mui-org/material-ui/blob/e221142238ebc5138dbee3c21b05abfbef67489f/packages/material-ui/src/Tab/Tab.js#L14

Current Behavior

Setting the fullWidth prop requires the user to also override the root css if they want a tab width bigger than 264px

Steps to Reproduce (for bugs)

  1. https://codesandbox.io/embed/007nxpjz2n
  2. make the window wider than 264 * 2 and see that they are not fullWidth

Context

The fullWidth prop is deceiving, had to chase down the unexpected behavior in devtools

Your Environment

Tech Version
Material-UI v1.2.2
React 16.x.x
browser Chrome 67
etc Sierra 10.13.2
@oliviertassinari oliviertassinari added good first issue Great for first contributions. Enable to learn the contribution process. component: tabs This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work labels Jun 22, 2018
@oliviertassinari
Copy link
Member

The fullWidth prop is deceiving, had to chase down the unexpected behavior in devtools

@deltaskelta I'm having a hard time seeing a case where the max-width can be a problem. I would consider it a safeguard against displaying something unusable. Still, I do get the point that it's deceiving. Do you want to work on it?

@jeffwillette
Copy link
Contributor Author

The case I just had was that I had two tabs in a div that was just a little bit bigger than double the maxWidth. I ran through pretty much all the css on the parent elements before I realized that maxWidth doesn't mean maxWidth.

I am wondering how the lack of maxWidth could deliver something unusable?

I can work on it, but I won't be able to start right away until I finish some other stuff first. Does this maxWidth problem go much deeper than just deleting the css?

@oliviertassinari
Copy link
Member

Thanks for the context. A fullwidth tab on a +1000px screen can be challenging to work with. The eye and the mouse has a large distance to travel.
Yes, it should be as simple as handling the CSS issue.

@jeffwillette
Copy link
Contributor Author

Ok, I'll make a PR soon then. Thanks!

@oliviertassinari
Copy link
Member

@deltaskelta Awesome, anytime you want.

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
Development

No branches or pull requests

2 participants