Tabs are not equal widths

Question

Tabs are not equal widths

Opened this issue 8 years ago · 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.

Answer 1 · 2017-02-01T15:43:56.000Z

Yeah I confirmed this issue. There are some width calculation problems in the Tab update hooks. Will fix later.

Answer 2 · 2017-02-01T15:59:51.000Z

Would using flexbox not make more sense for this?

Answer 3 · 2017-02-01T16:09:00.000Z

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

Answer 4 · 2017-02-01T16:15:31.000Z

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.

Answer 5 · 2017-02-01T16:27:49.000Z

@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