[Tabs] Default 'width' to 'auto' instead of '100 / n%'
See original GitHub issueI propose considering that Tab
components are not equal width by default. If you are putting content in the Tab
elements of variable width, the tabs do not render gracefully:
In the situation below, my Tabs
are in side an AppBar
component.
Tabs
with ‘width’ set to ‘100 / n%’ (in this case, 20%):

Tabs
with ‘width’ set to ‘auto’:

I’d be happy to open a PR if consensus is in favor of the change.
Issue Analytics
- State:
- Created 7 years ago
- Comments:8 (7 by maintainers)
Top Results From Across the Web
[Tabs] Default 'width' to 'auto' instead of '100 / n%' #3807
I propose considering that Tab components are not equal width by default. If you are putting content in the Tab elements of variable...
Read more >How to auto-resize tabs to fit a fixed-width container?
If you know how many 'tabs' you will have, then you can just divide 100 by that number, and set the width to...
Read more >How to change and AutoFit column width in Excel - Ablebits
To change the default width for all columns on a worksheet or the entire workbook, just do the following: Select the worksheet(s) of...
Read more >tab-size - CSS: Cascading Style Sheets - MDN Web Docs
The tab-size CSS property is used to customize the width of tab ... This example compares a default tab size with a custom...
Read more >width | CSS-Tricks
The width property in CSS specifies the width of the element's content area. This "content" area is the portion inside the padding, border, ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yeah I’m working on a method to calculate the position the inkbar should be in using getBoundingRect. this way, the inkbar will be positioned correctly depending on hot each Tab is rendered, not on how it assumes it will be rendered.
@alitaheri is still working on a fork of #2861. Might be worth waiting until he’s back from vacation to see whether this is already covered.
In any case, I understand what you’re saying about auto by default being a non-breaking change, as
min-width
(I’m assuming) will make the tabs evenly spaced by default.