[Solved]My ionic demo does not look good in Android device and emulator

Hi all,

I am somewhat newbie to ionic framework. I followed the tutorials and built the base tabs one. It looks good in desktop browser. But in emulator and devices, it breaks,

Please see screenshot

I am very tired of it. I thought it could be a minor issue and wanted to get help from you,

Thank you,

What is broken about it? Do you mean the tabs being on the top and a different color?

No, Actually, The title should be center.

And the 3 icons panel should be footer. But it is sticking to with header.

Please see screenshot below. This is how desktop chrome renders.

But the same breaks in Android.

That is on purpose. The styles are changed based on the platform, and Android is designed to look this way.

You can run ionic serve --lab to see how it will look on each platform in the browser.

You can override the style using the $ionicConfigProvider.

See this post for examples:

Thank you so much, I shall play with the configurations,

1 Like

May I know exactly where I should add these lines? in app.js? if yes, at which line please?

Thanks again,

Put them in the .config function:

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {
    $ionicConfigProvider.views.transition('ios');
    $ionicConfigProvider.tabs.style('standard').position('bottom');
    $ionicConfigProvider.navBar.alignTitle('center').positionPrimaryButtons('left');
});
1 Like