Tabs layout all wrong on device

tutorials
1

I’ve just started getting into Ionic and so far I’m very impressed!

However I’ve just been running through tutorials and everything looks great in the browser but I decided to deploy both in Genymotion as well as on my device and the layout is all messed up.

On device:

  1. Header text is left aligned
  2. Tabs are at the top
  3. The tabs “tabs-striped” style seems to be applied

I tried to upload screenshots to this thread but was getting: "Sorry, there was an error uploading that file. Please try again."
So I’ve uploaded them to imgur:
Browser: http://i.imgur.com/FBu4ddJ.png
Device: http://i.imgur.com/UgVcmjV.png

I was following this tutorial:
http://learn.ionicframework.com/videos/ion-tabs-directive/

Any idea what I’m doing wrong here or is this some Ionic bug?
Thanks

2

@markza - you are doing nothing wrong. If you are running Android this is the platform styling. Android tabs are on top and iOS tabs typically are on bottom. The latest version of Ionic tabs utilizes platform specific styling in this regard.

I’m assuming you have the Ionic CLI installed, if you do try running

ionic server --lab

from your project and you’ll see an output on an iphone and android phone, this will show you the platform styling in effect.

3

Hi @bradmartin thanks for pointing that out, I was able to see that side by side view with the command you provided.
In these docs http://ionicframework.com/docs/components/#tabs
Do you know if all the components listed by default are styled for iphone?

If so do you know if there’s a specific set of style guidelines for Android? Lastly As a matter of interest is there any way to disable android specific styling and apply IOS platform styling?
Thanks

4

You can change settings in $ionicConfigProvider to style things the same on both iOS and Android

http://ionicframework.com/docs/api/provider/$ionicConfigProvider/