[SOLVED] Ionic multiple problems : blank page on mobile, ion-pane strange height,


#1

Hello !

I’m new in ionic (and angular) development.

I try to make a simple app, but hard to deal with some problems :

  • my app works well on safari + chrome
  • when i run it on ios or android : a total blank page appear…
  • on safari and chrome, my ion-pane seems not have a correct size : have to set a specific height in order to display the ion-content under it …
  • How can i deploy the ionic app on my android phone and at the same time have error displayed on console or something like that ?

Ionic version : Ionic CLI version 1.0.17
Platform : MAC OSX 10.9.4

Here is my code :

index view

<!DOCTYPE html>
<html ng-app="starter">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <!-- css stylesheets -->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- app's js -->
    <script src="js/app.js"></script>

    <!-- viewmodel -->
    <script src="viewmodels/dashboard.js"></script>
    <script src="viewmodels/newEvent.js"></script>

</head>
<body ui-view>
</body>
</html>

Dashboard view

<div ng-controller="Dashboard">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Daily Event Counter</h1>
                <button class="button button-clear button-positive" ui-sref="newEvent">
                    <i class="icon ion-ios7-plus-outline"></i>
                </button>
        </ion-header-bar>
    </ion-pane>

    <ion-content>
        <div class="card">
            <div class="item item-text-wrap">
                <div class="row">
                    <div class="col col-80 eventTitle">Drink</div>
                    <div class="col col-20 eventAddButton">
                        <button class="button button-clear button-positive">
                            <i class="icon ion-ios7-pulse-strong"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="item item-text-wrap">
                <div class="row">
                    <div class="col col-80 eventTitle">This is a long long text for a long long story</div>
                    <div class="col col-20 eventAddButton">
                        <button class="button button-clear button-positive">
                            <i class="icon ion-ios7-pulse-strong"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
</div>

dashboard.js

/**
 * Created by Sebastien on 14/07/2014.
 */

angular.module('starter').controller('Dashboard', function ($scope) {



});

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'

var app = angular.module('starter', ['ionic', 'ui.router']);

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});


<!-- route -->
app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'views/dashboard.html'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('newEvent', {
            url: '/newEvent',
            templateUrl: 'views/newEvent.html'
        });

});

style.css

/* Empty. Add your own CSS if you like */

.eventTitle {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

.eventAddButton {
    text-align: right;
}

ion-content {
    top:40px !important;
}

ion-pane {
    height:50px !important;
}

newEvent view

<div ng-controller="NewEvent">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <button class="button button-clear button-positive" ui-sref="dashboard">
                <i class="icon ion-arrow-left-c"></i>
            </button>
            <h1 class="title">Daily Event Counter</h1>
            <button class="button button-clear button-positive" ui-sref="newEvent">
                <i class="icon ion-ios7-checkmark-outline"></i>
            </button>
        </ion-header-bar>
    </ion-pane>

    <ion-content>
        <div class="card">
            <div class="item item-text-wrap">
                        <ul class="list">
                            <label class="item item-input">
                                    <span class="input-label">Event title</span>
                                    <input type="text" placeholder="Drink water">
                            </label>
                            <ion-toggle ng-model="isComplex">Complex Event</ion-toggle>
                            <label class="item item-input" ng-show="isComplex">
                                <span class="input-label">Unit</span>
                                <input type="text" placeholder="L">
                            </label>
                        </ul>
            </div>
        </div>
    </ion-content>
</div>

newEvent.js

/**
 * Created by Sebastien on 14/07/2014.
 */

angular.module('starter').controller('NewEvent', function ($scope) {

    $scope.isComplex = false;


});

Thanks for your help !


#2

Hi @Dahevos,
Can you create codepen for this?


#3

Hello @shashikant,

I don’t know how to create a codepen with ionic inside and with multiples files, ui-router, …
I think maybe it’s better to share my project file with you ?

I have found the problem of the white and blank page : is on the router, i have specify a default route to /home instead /dashboard.