Android css issues

ionic-v1
1

Hi, this is an app with no basically no changes made to the stock CSS that comes with the Ionic library. All changes I do are made into a seperate styles.css file. But for testing this, I have completely removed any custom CSS. It still occurs. Both in my Android device, and emulating Android. This does not happen in iOS.

I’m using Kitkat 4.4.4 and Ionic 1.2.6 (latest).

The problems: (see screenshot)

  • Tabs does not have the correct dark background using class “tabs-dark” (shows fine in ios) (shows correctly in Chrome browser on PC)
  • Screen gets a 10-15px or so padding from the bottom. It’s as if the screen gets resized and the script that should calculate total height, does it before that and hence leaving the screen with incorrect height for the content area. (this does occur in my browser on my PC when opening and closing the debug bar and resizing window)
  • My left side menu is blue, and that’s what is showing on the bottom in the padding.

2

I have exactly the same issue! :frowning:

3

I wrote a simple javascript (jquery) to adjust the height of the .pane div that is the content div. This fixes the issue for me.

Hopefully someone involved in Ionic reads this and fixes it in the framework

Put this in the .run() function (or in any javascript file really). I had to use jQuery as setting the height via getElementByClassName was not possible for some reason.

    //Adjust pane on resize of browser window to remove padding bottom bug that occurs on android
    window.onresize = function() {
        $('.pane').height(window.innerHeight + 'px');
    };
4

Can someone reply regarding Android having different CSS? Even the starter kit for “tabs” have the same issue on Android. All tabs and stuff have white background (instead of grey). It looks sorta, “bad”.

5

Okay I found an answer in another thread to override the default Android CSS:

Code:
.config([’$ionicTabsConfig’, function($ionicTabsConfig) {
// Override the Android platform default to add “tabs-striped” class to “ion-tabs” elements.
$ionicTabsConfig.type = ‘’;
}])

This will make the tabs show as per expected