Hi,
I have been using Ionic for a couple of months now, with IBM Worklight to create an hybrid app. I’ve been using Ionic 1.0.0beta1, and it works and displays all the content fine for me. However, when I upgrade to the later versions of Ionic, I get a blank page on my main page which has an ion-side-menus & ion-side-menu-content tags with only part of the header showing on screen.
Could someone let me know what changed in the recent versions that would causes a blank screen when using ionic tags?(It could be an IBM Worklight issue also) (I would hate to have to stay with version beta1 and miss out on all the other upgrades and fixes.
Note: All my ionic side menus and content tags look fine and display without issue in version ionic 1.0.0beta1.
Can you provide some code, maybe any errors from iOSs remote debugging. Kind of hard to know the issue with out this.
Here’s my code for home page
/****** home.html ******/
<div ng-controller="homeCtrl">
<ion-side-menus >
<ion-side-menu-content>
<ion-header-bar align-title="center" class="bar-positive ">
<button ng-click="toggleLeftSideMenu()" class="button button-icon icon ion-navicon"></button>
<div class="button-bar colorOutlineWhite" style="margin-left:20px;margin-right:20px;">
<a class="button button-small leftRoundedButton"> Left</a>
<a class="button button-small rightRoundedButton">Right</a>
</div>
<button class="button button-icon icon ion-plus-circled"></button>
</ion-header-bar>
<ion-content style="margin-bottom:-35px; margin-top:10% !important;">
<h3 >Testing</h3>
<ion-list>
<ion-item class="item item-thumbnail-left">
<img src="images/apple.png">
<p>Item 1</p>
<p>3</p>
<span class="badge badge-assertive">2</span>
</ion-item>
<ion-item class="item item-thumbnail-left">
<img src="images/apple.png">
<p>Item 1</p>
<p>3</p>
<span class="badge badge-assertive">2</span>
</ion-item>
<ion-item class="item item-thumbnail-left">
<img src="images/apple.png">
<p>Item 1</p>
<p>3</p>
<span class="badge badge-assertive">2</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar">
<p>Settings</p>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>
<p>Item1</p>
</ion-item>
<ion-item>
<p>Item2</p>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
/**** home.html****/
Here’s my index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/ionic.css">
<link rel="stylesheet" href="css/style.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="ionic/ionic.bundle.js"></script>
<script src="angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/homeCtrl.js"></script>
</head>
<body style="display: none;">
<div ng-view></div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Here’s the logs from XCode
2014-06-26 12:32:56.101 Test2[1734:3e03] [DEBUG] [WORKLIGHT] -[WLCordovaAppDelegate handleAppWebResources:] in WLCordovaAppDelegate.m:373 :: NativeInitUntilWebViewLoad : START
2014-06-26 12:32:56.159 Test2[1734:60b] Application windows are expected to have a root view controller at the end of application launch
2014-06-26 12:32:56.166 Test2[1734:3e03] Temp update file is /var/mobile/Applications/1B155C7F-F0A6-4F55-9514-7E36CF655F6A/Library/tempUpdateFile
2014-06-26 12:32:56.184 Test2[1734:3e03] Web resources integrity test is disabled.
2014-06-26 12:32:56.207 Test2[1734:60b] Multi-tasking -> Device: YES, App: YES
2014-06-26 12:32:56.225 Test2[1734:60b] Unlimited access to network resources
2014-06-26 12:32:56.413 Test2[1734:60b] [CDVTimer][splashscreen] 96.574962ms
2014-06-26 12:32:56.414 Test2[1734:60b] [CDVTimer][TotalPluginStartup] 97.687006ms
2014-06-26 12:32:56.432 Test2[1734:60b] WARNING: AutoHideSplashScreen key in Cordova.plist is missing or set to NO! SplashScreen will display indefinitley unless you manually hide it. Set value to YES to autohide.
2014-06-26 12:32:56.459 Test2[1734:60b] [DEBUG] [WORKLIGHT] -[WLCordovaAppDelegate postInitOnMainThread:] in WLCordovaAppDelegate.m:303 :: NativeInitUntilWebViewLoad : END
2014-06-26 12:32:56.543 Test2[1734:60b] Resetting plugins due to page load.
2014-06-26 12:32:56.843 Test2[1734:60b] Finished load of: file:///var/mobile/Applications/1B155C7F-F0A6-4F55-9514-7E36CF655F6A/Test2.app/www/skinLoader.html
2014-06-26 12:32:56.995 Test2[1734:60b] Resetting plugins due to page load.
2014-06-26 12:32:57.454 Test2[1734:60b] Finished load of: file:///var/mobile/Applications/1B155C7F-F0A6-4F55-9514-7E36CF655F6A/Test2.app/www/default/index.html
2014-06-26 12:32:57.468 Test2[1734:60b] {
appVersionPref = “1.0”;
freeSpace = 4888260608;
wlSkinLoaderChecksum = “(null)”;
wlSkinName = default;
}
2014-06-26 12:32:57.485 Test2[1734:60b] THREAD WARNING: [‘WLApp’] took ‘17.624268’ ms. Plugin should use a background thread.
2014-06-26 12:32:57.501 Test2[1734:60b] DeviceAuthManager:getWorklightUniqueDeviceId --> returning UUID from the keychain
2014-06-26 12:32:57.600 Test2[1734:60b] THREAD WARNING: [‘DeviceAuth’] took ‘104.437256’ ms. Plugin should use a background thread.
2014-06-26 12:32:58.259 Test2[1734:60b] [INFO] [wl.client] WL.Client.init ENTERING
2014-06-26 12:32:58.265 Test2[1734:60b] [DEBUG] [NONE] ondeviceready event dispatched
2014-06-26 12:32:58.270 Test2[1734:60b] [INFO] [wl.client] WL.Client onEnvInit ENTERING
2014-06-26 12:32:58.279 Test2[1734:60b] [DEBUG] [NONE] wlclient init started
2014-06-26 12:32:58.280 Test2[1734:60b] [DEBUG] [NONE] Read cookies: null
2014-06-26 12:32:58.281 Test2[1734:60b] [DEBUG] [NONE] CookieMgr read cookies: {}
2014-06-26 12:32:58.283 Test2[1734:60b] [DEBUG] [NONE] addDeviceIDHeader deviceIDSuccessCallback
2014-06-26 12:32:58.284 Test2[1734:60b] [DEBUG] [NONE] connectOnStartup finalizeInit
2014-06-26 12:32:58.286 Test2[1734:60b] [DEBUG] [NONE] before: app init onSuccess
2014-06-26 12:32:58.287 Test2[1734:60b] [DEBUG] [NONE] after: app init onSuccess
2014-06-26 12:32:58.288 Test2[1734:60b] [DEBUG] [NONE] added onPause event handler
2014-06-26 12:32:58.290 Test2[1734:60b] [DEBUG] [NONE] wlclient init success
2014-06-26 12:33:16.279 Test2[1734:60b] [DEBUG] [NONE] Flush called
When I use ionic beta v1, I can see the content
When I use the later versions of ionic(here, I’m using IonicBetaV8), I see this
The issue is probably coming from here.
<script src="angular/angular-route.js"></script>
No need to include this, ionic.bundle comes with ui-router.
And here.
<div ng-view></div>
use <ion-nav-view></ion-nav-view> instead
Plus this…
<body style="display: none;">
I found this discussion and hack for Ionic.bundle
iOS/Worklight/Ionic
and applied it to the ionic.bundle.js
Still no luck.
However, when I switched back to using ng-route instead of ui-router, I started to see something on screen. I added padding-bottom to ng-view and the header bar started to reveal itself. I added about 1000px(just to see what would happen) of padding-bottom and the view is completely visible.
<div ng-view class="addpadding"></div>
I wonder if ui-router is having some issue blocking content or worklight could be blocking the content.
By switching back to using ng-route and adding some padding to the ng-view, it seemed to fix my issue.
When I tried the same hack/fix using
ui-router and <ion-nav-view>
the issue still occurs.
It looks like I may have to use ng-route while using work light and ionic together. Worklight and/or ui-router must be causing a white block to appear over content displayed on screen.
One oohing thing I noticed though. When I added the padding-bottom to the view, it affects the scrolling of lists on screen. Now, I need to figure out how to over come this issue.
I just realized something. I removed the platform hack from my code and kept the padding-bottom to the
and I’m still able to see the view. This leads me to believe something is up with angular and/or ng-view.