Tabs are not equal widths
Opened this issue · 5 comments
If you inspect the Tabs demo you'll notice that the buttons are not equal widths and that the highlight if the middle button is selected, extends over the third tab.
Yeah I confirmed this issue. There are some width calculation problems in the Tab update hooks. Will fix later.
Would using flexbox not make more sense for this?
@RangerMauve Worth trying. The tab bars are originally migrated from react-native-scrollable-tab-view
, where widths are computed by javascript on the fly. I modified some of those code to make it work on browsers but some issues still remain.
Try having the tab container be a flexbox with flex-direction: row
and the tab items have flex: 1
to make them all take the same width. This approach doesn't work well when you have more tabs than can comfortably fit without any horizontal overflow.
@RangerMauve If your tabs can't fit than you should probably consider another approach or use horizontally scrollable tabs. In general it's probably best to follow these quidelines
Here's some code I wrote yesterday to make my own tabs using flexbox, maybe someone can adapt it: https://gist.github.com/MarkMurphy/3304a78c42b1993abc23801fd99f5caa