CODEWITHSUNDEEP
angularjsionic-frameworkibm-mobilefirst
Davoin Showerhandles
Davoin Showerhandles

Reputation: 67

Display issue in an Ionic / Angular app running in IBM mobilefirst

It's my first time to start working on mobile apps using angular and ionic so forgive me if this is just a simple problem. I tried googling about this issue but to no avail. Here's the problem, I tried recreating the sample app created using Ionic in the link below.

link here

I used the IBM MobileFirst environment to run my application. The issue is, if I didn't add a lot of < br > tags before the closing tag of the body, the display would look like the one on the right (see attached image).

screenshots

Anyone can tell me why this is happening?

Code snippet from image on the left:

....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

Code snippet for the one on the right

....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
</body>
</html>

So basically, it only gets fixed if I add lots of < br > tags before the body's closing tag. Isn't Ionic suppose to adjust to the full height? or the natural height of its contents?

Note: let me know if you cant see the image

Upvotes: 0

Views: 74

Answers (1)

Idan Adar
Idan Adar

Reputation: 44516

There is pre-existing CSS in Worklight that may cause this. You can attempt at fixing it by adding:

html, body {
    height: 100%;
}

It is suggested that instead of using Hybrid apps, you'll use Cordova apps in MobileFirst 7.1. Integration with Ionic is then much simpler. Read more here: https://www.raymondcamden.com/2015/03/23/working-with-ibm-mobilefirst-and-the-ionic-framework/

Upvotes: 1

Related Questions