What is the option to turn off build android style?

ionic-v1
1

Today, I updated my Ionic CLI to v1.3.2. I’m try to use the starter project “tabs” test crosswalk, but there are new question.
When I build android platform, and run it on my phone, the UI looks like android style, not same in browser.

image
chrome.png555×676 58 KB

image
phone.png720×1280 136 KB

I want to build like browser, there are some solution?
Thanks!

OS: Windows 7
Browser: Chrome 39.0.2171.99 m
Node: v0.10.33
NPM: v1.4.28
Ionic CLI: v1.3.2

2

Just so you know, the Ionic CLI doesn’t affect the styling, it’s the build version of Ionic you are using (which is Ionic 1.0.0-beta.14).

I don’t know of a way to mass style the entire platform (maybe some hack way of assigning “ios” to $ionicPlatform.platform when it is android?), but you can use $ionicConfigProvider to override specific styles. Look at the tabs.style, tabs.position and navbar. alignTitle.

3

Thank you for reply, I got answer, cause Ionic added some css styles support for android, on my android emulator, document.body.className = "platform-android platform-cordova platform-webview grade-b platform-android4 platform-android4_3 platform ready".
But, I don’t like to override, if the hacks is more and more, my work is hard.
I’m only want to set something, then use ios rules, $ionicPlatform.platform = "ios" is not work. :fearful:

4

Yeah I wasn’t saying that would work, just that some way of hacking that could work.

I would just use override the styling in the config provider.

$ionicConfigProvider.tabs.position("bottom");
$ionicConfigProvider.tabs.style("standard");
$ionicConfigProvider.navBar.alignTitle("center");

or, if you only want to override android:

$ionicConfigProvider.platform.android.tabs.position("bottom");
$ionicConfigProvider.platform.android.tabs.style("standard");
$ionicConfigProvider.platform.android.navBar.alignTitle('center');
2 Likes
5

Thanks! It’s work, I’m still try to find some better solution. :blush:

6

@brandyshea’s solution is the way to override the default android configurations.

7

Is there have some other ways?
I try to reset document.body.className to android and ios platform’s classes in browser, nothing changes.

8

Not really. Because we’re dealing with platform configurations in js, we’re using device information form cordova.

https://github.com/driftyco/ionic/blob/master/js/angular/service/ionicConfig.js#L537

So we get the platform via cordova, and then use that in the configuration setup.