Search code examples
androidcsscordovaphonegap-pluginsripple

CSS Newbie: CSS not rendering on Android but does render with Visual Studio Ripple Virtual Nexus (Galaxy)

My CSS renders quite drastically from the Ripple Nexus(Galaxy) and my Samsung Galaxy. Note the buttons and UL elements. I didn't find where the CSS I was trying to use wasn't supported on Android and the header and footer seem to be recognizing the CSS. Can someone nudge me in the right direction?

Physical Phone

Ripple Virtual Phone

The HTML 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script src="scripts/app.js"></script>
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link href="css/sticky-footer.css" rel="stylesheet">
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>GPS</title>
</head>
<body ng-controller="MainCtrl as main">

    <div class="container-fluid">

        <div class="page-header">
            <h1>My Cool GPS</h1>
        </div>



        <div class="container btn-group-vertical btn-group-lg btn-block text-uppercase panel panel-default panel-borderless">
            <button type="button" class="btn btn-primary" ng-click="main.getPosition()">Current Position</button>
            <button type="button" class="btn btn-success" ng-click="main.watchPosition()">Watch Position</button>
            <button type="button" class="btn btn-danger" ng-click="main.stopWatching()">Stop Watching</button>
        </div>



        <div class="panel panel-default">
            <ul class="list-group">
                <li class="list-group-item list-group-item-info text-uppercase">Increment: <span class="label label-primary h1" ng-bind="main.incrementer"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">distance: <span class="label label-primary h1" ng-bind="main.distance"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">latitude: <span class="label label-primary h1" ng-bind="main.latitude"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">longitude: <span class="label label-primary h1" ng-bind="main.longitude"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">accuracy: <span class="label label-primary h1" ng-bind="main.accuracy"></span></li>
            </ul>
        </div>
    </div>




    <footer class="footer">
        <div class="container">
            <p class="text-muted">My Cool GPS</p>
        </div>
    </footer>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>


</body>
</html>

The CSS:

form {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

#title {
    font-size: 16px;
}

#summary {
    font-size: 35px;
}

#summary img {
    float: right;
}

#error-msg {
    text-align: center;
    margin-top:  50%;
    font-weight: bold;    
}

.page-header{
    text-align:center;
}

.footer {
    text-align:center;
}

.panel-borderless {
    border: 0;
    box-shadow: none;
}

Solution 
  • <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstra‌​p.min.css" rel="stylesheet">

    can you add https and try again?