Jelmer Jelmer - 5 months ago 141
Javascript Question

Ionic <ion-scroll>/<ion-content> scrolls further than screenlength

Here is a demonstration of what is going wrong: Video

The pane scrolls too far, it should stop after the last button but it seems to scroll for exactly another page-height.
I have multiple ion-contents but I hide the ones that I don't use at that moment with ng-class="ng-hide"

<body>
<!-- Five number code -->
<div class="animated fadeInRight" data-ng-class="numberCodeShow">
<ion-content scroll="false" style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<form data-ng-submit="showDashboard(code.fiveNumberCode)">
<ul class="fieldList padding">
<li><p style="text-align: center; padding-top: 10px;">Log in met de 5-cijferige code</p></li>
<li class="loginCodeWrapper">
<div class="input">
<input class="loginCode" data-ng-model="code.fiveNumberCode" type="tel" name="code" maxlength="5" required/>
</div>
</li>
</ul>
<div class="padding">
<button data-ng-style="{'border-bottom-color': style.style1}" style="background-color: #FFFFFF" type="submit" class="button button-block button-default signinbutton">Sign In<i data-ng-style="{'color': style.style1}"class="icon ion-arrow-right-c signinIcon"></i></button>
</div>
</form>
</ion-content>
</div>
<!--// Five number code //-->

<!-- Dashboard -->
<div class="animated fadeInLeft dashboard" data-ng-class="dashboardShow">
<ion-content scroll='true' style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<div class="details">
<p class="welcomeName" data-ng-style="{'border-bottom-color': style.style1}"><i data-ng-style="{'color': style.style1}" style="padding-right: 5px;" class="fa fa-user"></i>Welkom {{user.name}}</p>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Accordering</label>
<div>
<div class="padding">
<button data-ng-click="showOpenDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder-open buttonIconLeft"></i>Mijn openstaande taken</button>
</div>
<div class="padding">
<button data-ng-click="showAllDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder buttonIconLeft"></i>Alle Documenten</button>
</div>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Overige</label>
<div class="padding">
<button data-ng-click="getOrganisations()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-contacts buttonIconLeft"></i>Contactpersonen</button>
</div>
<div class="padding">
<button data-ng-click="showImageUpload()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-camera buttonIconLeft"></i>Foto Uploaden</button>
</div>
<div class="padding">
<button data-ng-click="backToFolders()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-document-text buttonIconLeft"></i>Bestanden</button>
</div>
<div class="padding">
<button data-ng-click="showNotifications()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-notifications buttonIconLeft"></i>Notificaties</button>
</div>
</div>
</div>
</ion-content>
</div>

<!--// Dashboard //-->


This is a piece of the code so you can see how I build it up. The variables that are in the code are either
ng-show
or
ng-hide
. In this case
numberCodeShow = 'ng-hide'
and
dashboardShow = 'ng-show'
.

I tried setting
max-height
on ion-scroll but it doesn't work. Does anyone know why this problem occurs?

Answer

Seems I have fixed it myself by putting scroll = false on the and make a seperate underneath with height:100vh;

To answer A. Vin's question:

This looks like what I had:

<ion-content scroll=true>
.....
.....
.....
</ion-content>

This resulted in the scroll going to far because of an upper div.

This fixed the problem:

<ion-content scroll=false>
<ion-scroll style="height:100vh">
...
...
...
</ion-scroll>
</ion-content>

I hope this resolves your issue too! If you have any other questions feel free to ask :)

Comments