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.

Issue(tabs): Spacing problem with 5 tabs on iOS

See original GitHub issue

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) capture

iOS (Native with 5 tabs) capture3

Android capture2

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

Issue Analytics

State:
Created 7 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

ben-kn-appcommented, Apr 12, 2016

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.

1reaction

brandyscarneycommented, Apr 13, 2016

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