Ionic-framework: Issue(tabs): Spacing problem with 5 tabs on iOS

[dylanvdmerwe]

Short description of the problem:

When adding more than 4 tabs on iOS the spacing of tabs goes over the screen.

What behavior are you expecting?

On iOS, the maximum number of tabs that can be added are 5. At the very least, 5 tabs should fix on an iOS device.

iOS (Ionic 2 with 5 tabs)

iOS (Native with 5 tabs)

Android

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
OS:
Node Version: v5.7.0

[ben-kn-app]

Just adding my 2 cents. Was able to replicate this problem with 5 tabs on device iPhone 5s and also on iPhone 5s simulator. Seems the .tab-button style (in app.ios.css) has a max-width: 240px; causing this behavior. Removing this max-width for iPhone 5s seems to solve the problem. The max-width was added probably with a reason (what is the reason?) so this is not a _fix_. Should be investigated further, but could point you in the (hopefully) right direction.

[dylanvdmerwe]

@brandyscarney does that sound like a reasonable fix?

[brandyscarney]

@dylanvdmerwe I'm not seeing the problem resolved by removing the max-width, only by removing the min-width: 80px. You should be able to set:

$tab-button-ios-min-width: auto;

In your theme/app.ios.scss file as a temporary work around until I can look into this more and make sure it doesn't break anything by removing it. :smile:

[brandyscarney]

Fixed for beta.7. I didn't see any negative results of removing this but let me know if anyone does. Thanks for the issue!

[mypark]

might want to adjust the tab padding as well since it ellipses the tab titles when it gets that small when it doesn't have to.

[brandyscarney]

@mypark could you create a new issue for this please and tag me in it? :smile:

[mypark]

ok, created issue https://github.com/driftyco/ionic/issues/6679