Skip to content

Tabs text overflow with scrollable and fullwidth #13610

Description

@mrmojica

The tab labels get cut off when in mobile/small view. This occurs when setting the fullWidth prop to true in mobile view and having scrollable and scrollButtons. I do understand that if labels are too long for the tabs it will overflow and not be visible and when using fullWidth you should not have too many tabs. But if scrollable and scrollButtons are set it would be expected that the tabs should not need to shrink.

Example of the issue: https://codesandbox.io/s/1qojj44k6j

Should the fullWidth and scrollable, and scrollButtons props not be intended to be used this way?

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

If fullWidth, scrollable and scrollButtons are set it would be expected that the tabs should not need to shrink. Maybe have an override that sets MuiTab-fullWidth: { flexShrink: 0 }.

Current Behavior

The tab shrink and labels get cut off when in mobile/small view when using fullWidth, scrollable, and scrollButtons prop.

Steps to Reproduce

Link: https://codesandbox.io/s/1qojj44k6j

Context

Your Environment

Tech Version
Material-UI v3.5.1
React
Browser
TypeScript
etc.

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGreat for first contributions. Enable to learn the contribution process.scope: tabsChanges related to the tabs.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions