I have a specific problem on my Ionic project. I have bunch of pages and every page is working properly, except one.
Problem is in the scrolling of the page. While scrolling using mouse or keyboard on normal page view everything is working perfectly. As soon as I turn on the Google Chrome moblie view, or build the app and put it on Android tablet, my y (vertical) scroll is malfunctioning. I can’t access the whole page by scrolling because it either keeps returning me to the top, or it simply blocks my scrolling whatsoever. When I refresh the page, or go to another page and return back to the malfunctioning one, it seems to be working fine.
I’ve tried every solution I found on the web and none seem to be working.
Here’s my html of the malfunctioning page:
<ion-view view-title="Podešenost grilla">
<!--Title edit vrši se u Ionic library css: linija: 3967-->
<ion-nav-bar class="bar-balanced appCustomColor">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon appCustomColor" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content overflow-scroll="true">
<div style="background-color:#1A4689 !important; height:30px; margin:10px 0px 0px 0px; padding: 0px 0px 0px 10%">
<h1 style="color:#fff !important; font-size:20px; margin:0%; width:300px; float:left">Temperature proizvoda</h1>
<button style="float:right; margin: 0.5% 2% 0% 0%; background-color: #387ef5 !important; border-radius:2px; border-width: 0px; color:#fff" ng-click="spojiBlue()">Connect</button>
</div>
<div style: "width:100%"class="btn-group">
<a style="text-align:center; width:20%; margin:3% 0% 0% 4%" class="button" ng-repeat="grilevi in grillServer" ng-class="{'button-positive': isActiveGrill('{{grilevi.uid_skl}}')}" ng-click="setActiveGrill('{{grilevi.uid_skl}}')">{{grilevi.naziv_uredjaja}}</a>
</div>
<div class="button-bar" style="text-align:center; width=100%">
<a style="margin:3% 0% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('1')}" ng-click="setActivePloca('1')">Ploča br:1</a>
<a style="margin:3% 0% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('2')}" ng-click="setActivePloca('2')">Ploča br:2</a>
<a style="margin:3% 0% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('3')}" ng-click="setActivePloca('3')">Ploča br:3</a>
<a style="margin:3% 4% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('4')}" ng-click="setActivePloca('4')">Ploča br:4</a>
</div>
<div class="button-bar" style="text-align:center; width=100%">
<a style="margin:3% 0% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('5')}" ng-click="setActivePloca('5')">Ploča br:5</a>
<a style="margin:3% 0% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('6')}" ng-click="setActivePloca('6')">Ploča br:6</a>
<a style="margin:3% 0% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('7')}" ng-click="setActivePloca('7')">Ploča br:7</a>
<a style="margin:3% 4% 0% 4%" class="button" ng-class="{'button-positive': isActivePloca('8')}" ng-click="setActivePloca('8')">Ploča br:8</a>
</div>
<!-- <pre>{{mode || 'null'}}</pre> -->
<label style="margin:3% 0% 0% 0%" class="item item-input item-select">
<div class="input-label">
Proizvod
</div>
<select ng-model="$parent.proizvod" ng-options="i.id_proizvod as i.proizvod for i in proizvodiServer">
<option>Select</option>
</select>
</label>
<!--
<div class="btn-group">
<a class="button" ng-repeat="proizvodi in proizvodiServer" ng-class="{'button-positive': isActiveProizvod('{{proizvodi.id_proizvod}}')}" ng-click="setActiveProizvod('{{proizvodi.id_proizvod}}')">{{proizvodi.proizvod}}</a>
</div>
-->
<div class="appWrapperI">
<!--html za dohvaćanje s Blue2 sonde -->
<div>
<div id="statusDiv"></div>
<div ng-show="hideButtons">
<button id="sendDataToServer1">Send data to server</button>
<button id="sendDataToServer2">Send data to server</button>
<button id="sendDataToServer3">Send data to server</button>
<button id="sendDataToServer4">Send data to server</button>
</div>
</div>
</div>
<div style="text-align: center; padding: 3% 20% 0% 20%;">
<!--Input boxevi - vrijednost dolazi iz sonde-->
<label class="item appItem-inputI" style="float:left">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute1">...</h1>
</label>
<h1 style="float: left; font-size: 30px; padding-left: 2%; margin: 5px 0px 0px 0px">P1</h1>
<h1 style="float: right; font-size: 30px; padding-left: 2%; margin: 5px 0px 0px 0px">P2</h1>
<label class="item appItem-inputI" style="float:right">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute2">...</h1>
</label>
</div>
<div class="appWrapperIII">
<label class="item appItem-inputI" style="float:left">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute3">...</h1>
</label>
<h1 style="float: left; font-size: 30px; padding-left: 2%; margin: 5px 0px 0px 0px">P3</h1>
<h1 style="float: right; font-size: 30px; padding-left: 2%; margin: 5px 0px 0px 0px">P4</h1>
<label class="item appItem-inputI" style="float:right">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute4">...</h1>
</label>
</div>
<div style="width:100%">
<div style="padding: 7% 0% 0% 0%; width:40%; float:left">
</div>
<div style="padding: 7% 0% 0% 0%; width:20%; float:left">
<label class="item appItem-inputII" style="float:left; margin: 0% 10% 0% 0%">
<input type="text" ng-model="$parent.vrijemePecenja" style="text-align: center; font-size: 50px; width: 195px; height: 75px " >
</label>
</div>
<div style="float:left; padding: 9% 0% 0% 0%; width: 20%">
<h1 style="float: left; font-size: 30px; margin: 0px 0px 0px 5px;">(sek)</h1>
</div>
</div>
<div style="width:100%; float:left">
<div style="float:left; padding: 3% 0% 0% 0%; width:33.333%; max-width:33.333%">
<ion-toggle value="false" ng-model="$parent.zdrIspravnost" toggle-class="toggle-positive">Zdravstvena ispravnost</ion-toggle>
</div>
<div style="float:left; padding: 3% 0% 0% 0%; width:33.333%; max-width:33.333%">
<ion-toggle value="false" ng-model="$parent.kvaliteta" toggle-class="toggle-positive">Kvaliteta</ion-toggle>
</div>
<div style="float:left; padding: 3% 0% 0% 0%; width:33.333%; max-width:33.333%">
<ion-toggle ng-model="proizvodIspravan" ng-change="proizvodIspravanChange()" toggle-class="toggle-positive">Proizvod ispravan</ion-toggle>
</div>
</div>
<div style="padding:5% 0% 0% 0%" ng-show="proizvodIspravan">
<!--Input boxevi - vrijednost dolazi iz sonde-->
<div style="float:left; width:100%">
<div style="float:left; width:40%">
<h1 style="float: left; font-size: 20px; padding-left: 4px; margin: 5px 0px 0px 0px">Gornja ploča</h1>
</div>
<label class="item appItem-inputIII" style="float:left">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute5">...</h1>
</label>
</div>
<div style="float:left; width:100%; padding-top:2%">
<div style="float:left; width:20%">
<h1 style="float: left; font-size: 20px; padding-left: 4px; margin: 5px 0px 0px 0px">Donja ploča</h1>
</div>
<div style="float:left; width:20%">
<label class="item appItem-inputIII" style="float:left">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute7">...</h1>
</label>
</div>
<div style="float:left; width:20%">
<label class="item appItem-inputIII" style="float:left">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute6">...</h1>
</label>
</div>
<div style="float:left; width:20%">
<label class="item appItem-inputIII" style="float:left">
<h1 style="padding: 0% 0% 0% 45%" id="beatsPerMinute8">...</h1>
</label>
</div>
</div>
<div style="float:left; width:100%; padding-top:2%">
<div style="float:left; width:20%">
<h1></h1></div>
<div style="float:left; width:20%">
<h1 style="font-size:20px; text-align:center">Naprijed</h1>
</div>
<div style="float:left; width:20%">
<h1 style="font-size:20px; text-align:center">Sredina</h1>
</div>
<div style="float:left; width:20%">
<h1 style="font-size:20px; text-align:center">Nazad</h1>
</div>
</div>
</div>
<div style="padding: 7% 0% 0% 0%; width:100%; float:left">
<label class="item appItem-inputII" style="float:left; margin: 0% 10% 0% 0%">
<input type="text" ng-model="$parent.komentar" style="text-align: left; font-size: 20px; width: 100%; margin-left:1%" >
</label>
</div>
<div style="float:left; width:100%; text-align:center; padding:5% 20% 0% 20%">
<button class="button button-positive appButtonClass" ng-click="insertData()"> Unos </button>
</div>
</ion-content>
</ion-view>
P.S. Apologies for poor style formatting, this is just the first prototype version of the project.