Cordova/Onsen UI: CSS distortion in app



  • We built a hybrid mobile application with cordova and onsen UI tested and it works perfectly on the browser but when we run the app on a device (running android 6.1), the pages overlap each other with some elements in the page not displaying. After some times it comes back to normal.
    Please can anyone help us. i do not understand what is wrong. the debugger gives not error so i think its a css issue or the platform settings. Below are some pictures of the pages overlapping each other.0_1507122658008_^8128565C8908C8B9B0A35EBD7A52CB174EBA5B31BEEB3ECD24^pimgpsh_thumbnail_win_distr.jpg


  • Onsen UI

    @Stephane Need some code to help. Can you make a small example? I haven’t seen this before :/ Perhaps something related to the way you initially load the pages?



  • @Fran-Diox thanks i’ll check the the page loaders. i use angular js. sorry the app is too big ill show you some code. when tha app loads i initialise the pages as thus:

    $scope.Login = function(){
    myNavigator.resetToPage('recent.html');
    }
    

    then i have a slide menu defined as :

    app.controller('SlidingMenuController', ['$scope',  '$timeout', function($scope,  $timeout) {
    this.load = function(page) {
                 $scope.menu.content.load(page);
                 $scope.menu.left.close();
             };
    
             this.toggle = function() {
                 $scope.menu.left.toggle();
             };
    
     $scope.pushNewPage = function(pageUrl, index) {          
                     myNavigator.bringPageTop(pageUrl, { animation: 'none' }).then(function() {
                         $scope.menu.left.close();
                     });          
             }
    
    }]);
    
    

    and my menu

    <ons-page>
        <ons-list>
            <ons-list-item class="list-custom__height">
                <div class="left list-item-remove-padding"><ons-icon icon="ion-android-menu"></ons-icon></div>
                <div class="center list-item-remove-padding">MENU</div>
            </ons-list-item>
            <ons-list-item class="list-custom__height" ng-click="pushNewPage('home.html')" tappable>
                <div class="left list-item-remove-padding"><ons-icon icon="ion-android-home" class="list-item__icon"></ons-icon></div>
                <div class="center list-item-remove-padding">Home</div>
            </ons-list-item>
            <ons-list-item class="list-custom__height" ng-click="pushNewPage('chat.html')" tappable>
                <div class="left list-item-remove-padding"><ons-icon icon="ion-network" class="list-item__icon"></ons-icon></div>
                <div class="center list-item-remove-padding">Chat</div>
            </ons-list-item>
            <ons-list-item class="list-custom__height" ng-click="pushNewPage('company.html')" tappable>
                <div class="left list-item-remove-padding"><ons-icon icon="ion-android-map" class="list-item__icon"></ons-icon></div>
                <div class="center list-item-remove-padding">Company</div>
            </ons-list-item>
            <ons-list-item class="list-custom__height" ng-click="pushNewPage('newMessage.html')" tappable>
                <div class="left list-item-remove-padding"><ons-icon icon="ion-android-create" class="list-item__icon"></ons-icon></div>
                <div class="center list-item-remove-padding">New Message</div>
            </ons-list-item>
            <ons-list-item class="list-custom__height" ng-click="pushNewPage('profilePage.html')" tappable>
                <div class="left list-item-remove-padding"><ons-icon icon="ion-person" class="list-item__icon"></ons-icon></div>
                <div class="center list-item-remove-padding">My Profile</div>
            </ons-list-item>
            <ons-list-item class="list-custom__height" ng-click="pushNewPage('about.html')" tappable>
                <div class="left list-item-remove-padding"><ons-icon icon="ion-android-contacts" class="list-item__icon"></ons-icon></div>
                <div class="center list-item-remove-padding">About</div>
            </ons-list-item>
            <ons-list-item class="list-custom__height" ng-click="signOut()">
                <div class="left list-item-remove-padding"><ons-icon icon="ion-log-out" class="list-item__icon"></ons-icon></div>
                <div class="center list-item-remove-padding">Sign out</div>
            </ons-list-item>     
    </ons-page>
    

    and in one of the pages:

    <ons-page modifier="custom-page-view">
        <ons-toolbar>
            <div class="custom-center">
                <div class="custom-center-1">
                    <div><img class="header-applogo" src="img/Logo_Icon.png" alt=""></div>
                    <div class=" header-appname">About</div>
                </div>
            </div>
        </ons-toolbar>
        <div>
            <!-- Shortcut Menu -->
            <div class="menu-block moveMenu">
                <div ng-controller="SlidingMenuController">
                    <img class="com-btn" src="img/home/shortcut_btn_com.png" alt="combutton" ng-click="pushNewPage('home.html');" />
                    <img class="map-btn" src="img/home/shortcut_btn_map.png"  ng-click="pushNewPage('newMessage.html');" />
                    <img class="menu-btn" src="img/home/shortcut_btn_menu.png" alt="menu button" ng-click="slidingMenu.toggle()" />
                </div>
            </div>
        </div>
        <div style="text-align:center; margin-top: 50px">
            <ol>
                <h3 style="font-style: italic;">Safe Room</h3>
                <li>            
                    <div>
                        <span class="list-item__subtitle">Version: 1.0<br></span>
                        <span class="list-item__subtitle">Meet me</span>
                    </div>
                </li>
            </ol>
            <ons-button ng-click="myNavigator.pushPage('feedback.html', {animation: 'slide'});" modifier="light">FEEDBACK</ons-button>
            <h4 style="text-decoration: blink;color: cornflowerblue;margin-top: 10px">LICENSES</h4>
        </div>
        <div style="text-align: center;position: relative;bottom: 5px;">
            <label class="radio-button" style="font-size: 15px;">
                <u ng-click="myNavigator.pushPage('TermsAndConditions.html', {animation: 'slide'});">Terms</u> and <u ng-click="myNavigator.pushPage('Terms
    * undefinedAndConditions.html', {animation: 'slide'});">Conditions</u>
            </label>
        </div>
    

    i might not have given much info but ill appreciate any help.



  • it seems as the function :

      myNavigator.bringPageTop(pageUrl, { animation: 'none' }).then(function() {
                         $scope.menu.left.close();
                     });
    

    Doesn’t work properly in my app. I noticed that by changing the function bringPageTop with replacePage . Maybe the bringPageTop () has a problem or didn’t use it in a right way. My main aim of using it was to enable the users to go back to the previous page in the stack by pressing the back button on the phone. Please is there a way i can do this?


  • Onsen UI

    @Stephane Hmm, that should be done automatically by ons-navigator. Have a look at this example, push a page and then press ESC (it simulates Android’s back button). It requires cordova.js to be included in index.html when you are on the actual device. Otherwise, can’t you just use popPage?



  • @Fran-Diox i tried to load the example on my phone and when i pressed the back button after i tapped Push Page button, instead of moving to the previous page it exits the app.


Log in to reply