I am attempting to make a cross platform application using Cordova and utilizing the Ionic Framework. It had seemed to be working perfectly until I tried to run the app with the actual devices. I had been testing under the ripple emulator for Android and my local browser and gotten the result below (which is the desired result):
However, when I sent the program to my Android device for debugging I got this result:
And when I run under Windows Phone I get this result:
My main concern here is the difference between the android ripple emulator and the device. I think the windows phone has a problem with some of the local files that need modified, and for some reason the dimensions aren't matching properly so the footer goes too far down.
The problem with the Android device (I think) is that it throws the error "Invalid CSS property value: ..." There are about 40 invalid CSS property values when I run to the device all in the file ionic.min.css. These warnings do not appear when I target the ripple emulator. I have tried multiple restructurings of my project and using the full ionic.css file but both have not helped the issue. These are only warnings and the app does compile and run, but not with the desired look, which causes me to think if I can resolve these CSS problems I can fix the issue.
It may be worth noting I am running Windows 8.1 using VS2013 with Cordova Tools to build/compile/run.
EDIT:
Running Android 4.4
Code that would be in question is not my CSS (as I have none, but rather Ionic's css, so I'll post my current use of it.)
index.html (A few pages I omitted but follow this structure.)
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<!--
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
-->
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<div><a class="button icon icon-right ion-chevron-right" href="#/tab/resources">Additional Resources</a></div>
<div><a class="button icon icon-right ion-chevron-right" href="#/tab/gmetrics">Global Metrics</a></div>
<div><a class="button icon icon-right ion-chevron-right" href="#/tab/gfeed">Global Feed</a></div>
<div><a class="button icon icon-right ion-chevron-right" href="#/tab/googleforms">Google Forms</a></div>
<div><a class="button icon icon-right ion-chevron-right" href="#/tab/social">Social Networking</a></div>
<div><a class="button icon icon-right ion-chevron-right" href="#/tab/chapters">Chapters</a></div>
</ion-content>
</ion-view>
</script>
App.js (full)
angular.module('app', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.resources', {
url: "/resources",
views: {
'home-tab': {
templateUrl: "templates/resources.html"
}
}
})
.state('tabs.gmetrics', {
url: "/gmetrics",
views: {
'home-tab': {
templateUrl: "templates/gmetrics.html"
}
}
})
.state('tabs.gfeed', {
url: "/gfeed",
views: {
'home-tab': {
templateUrl: "templates/gfeed.html"
}
}
})
.state('tabs.googleforms', {
url: "/googleforms",
views: {
'home-tab': {
templateUrl: "templates/googleforms.html"
}
}
})
.state('tabs.social', {
url: "/social",
views: {
'home-tab': {
templateUrl: "templates/social.html"
}
}
})
.state('tabs.chapters', {
url: "/chapters",
views: {
'home-tab': {
templateUrl: "templates/chapters.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function ($scope) {
console.log('HomeTabCtrl');
});
