Cordova overwriting css based on platform


I'm using bootstrap with the latest version of Cordova to build an app for both android and Windows Phone 8.

I have a bootstrap navbar-fixed-bottom div defined for my main top level view.

On android devices the navbar will cover content near the bottom of the window. To fix this I need to specify a css styling of:

body {
    padding-bottom: 70px;

in the .css file.

On Windows phone 8, the navbar seems to be floating 70 pixels above the page.

Following the recommended guide in the Cordova docs, I added an overrides.css file to the top level 'merges' folder for both platforms. The android one is the same as above, but the wp8 file has a padding-bottom of 0px specified. I also add a blank copy of overrides.css to my top level /www folder. This styling applying to the body is only defined in overrides.css.

I then load overrides.css in my main index.html file.

Loading up the code on my android device, it appears that the body styling in the 'merges/android' directory does not get applied. The navbar goes back to covering a portion of my page, and doesn't let me scroll down further.

On wp8 it's still floating above the bottom of the page.

I've tried loading overrides.css before and after my main.css file. I've also ensured that nothing in main.css could be overwriting the body attribute. I've also removed the blank overrides.css file from my top level /www folder.

It seems I can only get the body css to work if it is placed in the top level /www overrides.css document. Which isn't what I want, as it should be getting replaced.

What could be preventing the platform specific body styling from being applied correctly?

Problem courtesy of: Bryce


@thatrohit's suggestion also works if you don't want to deal with the CLI merging functionality, however I discovered a solution to the problem.

It turns out that the merges folder created by the Cordova CLI must have the same folder structure of everything below the '/www' root folder.

The .css file I was trying to overwrite was located in '/www/css'.

In the merges folder I was missing the '/css' sub folder and had something like 'merges/Android/overrides.css', when it should have been 'merges/Android/css/overrides.css'.

Solution courtesy of: Bryce


You could always get the device platform by using device.platform and depending on the platform, specify the css. Like, if device.platform returns Android then you can apply your existing css or if it returns WinCE or Win32NT then you could specify another css for Windows Phone.

Discussion courtesy of: thatrohit

This recipe can be found in it's original form on Stack Over Flow.