question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tabs] Default 'width' to 'auto' instead of '100 / n%'

See original GitHub issue

I 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%):

screen shot 2016-03-25 at 11 55 50 am

Tabs with ‘width’ set to ‘auto’:

screen shot 2016-03-25 at 11 56 09 am

I’d be happy to open a PR if consensus is in favor of the change.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

7reactions
alitahericommented, Mar 30, 2016

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.

2reactions
mbrookescommented, Mar 27, 2016

@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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found