Hi all,
I have a state that accesses the following template. When I click on an input the page scrolls back to the top of the page (in Chrome mobile emulator and on Android) until I start typing something, at which point it scrolls down to where I imagine Ionic had intended the page to scroll to originally.
When an input is focused and the page scrolls back to the top, I am not able to perform any other scrolls until I tap another element (any element, not just an input).
When I’ve attempted this with the sidemenu demo, it seemed to work once or twice, but now it isn’t working. Irritatingly, it’s not scrolling back to the top of the page, it’s just not scrolling at all. Which leads me to believe there’s something in my code (as well as some other issue), but I can’t figure out what it is.
On iOS it seems to be scrolling as expected.
I’ve seen half a dozen or so threads about this, but none seemed to be exactly the same so I thought best to start my own. Any ideas anyone?
Cheers!
Below is the code for the template I am using.
<ion-view class="some-view">
<ion-header-bar class="bar bar-header">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">Sub Header</h1>
</ion-header-bar>
<ion-content class="some-class">
<div class="header-title row">
<div class="">
<h1>Header</h1>
<h2>Sub Header</h2>
</div>
</div>
<!--
SECTION 1
-->
<div class="list">
<div class="item item-text-wrap">
<p>Words words words</p>
</div>
<div class="item item-vivid">
Section 1 - Your Details
</div>
<label class="item item-input">
<span class="input-label"><span class="inline-highlight">*</span> Title</span>
<input type="text" ng-model="data.section1.title" placeholder="Mr/Mrs/Miss/Ms/Other" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label"><span class="inline-highlight">*</span> First name(s)</span>
<input type="text" ng-model="data.section1.firstnames" ng-disabled="data.uploaded"/>
</label>
<label class="item item-input">
<span class="input-label"><span class="inline-highlight">*</span> Last name</span>
<input type="text" ng-model="data.section1.lastname" ng-disabled="data.uploaded"/>
</label>
<label class="item item-input item-text-wrap">
<span class="input-label"><span class="inline-highlight">*</span> Are you an existing member?</span>
<span class="toggle-no" ng-class="data.section1.existing != 'yes' ? 'toggle-active' : 'toggle-inactive'">
No
</span>
<label class="toggle">
<input type="checkbox" ng-model="data.section1.existing" ng-true-value="'yes'" ng-false-value="'no'" ng-disabled="data.uploaded">
<div class="track">
<div class="handle"></div>
</div>
</label>
<span class="toggle-yes" ng-class="data.section1.existing == 'yes' ? 'toggle-active' : 'toggle-inactive'">
Yes
</span>
</label>
<label class="item item-input">
<span class="input-label"><span class="inline-highlight">*</span> Date of birth</span>
<input type="date" ng-model="data.section1.dob" placeholder="dd/mm/yyyy" ng-disabled="data.uploaded"/>
</label>
<label class="item item-divider">
<span class="inline-highlight">*</span> Telephone Numbers:
</label>
<label class="item item-input">
<span class="input-label">Home</span>
<input type="tel" ng-model="data.section1.telephone.home" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label">Work</span>
<input type="tel" ng-model="data.section1.telephone.work" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label">Mobile</span>
<input type="tel" ng-model="data.section1.telephone.mobile" ng-disabled="data.uploaded" />
</label>
<label class="item item-divider">
<span class="inline-highlight">*</span> Address:
</label>
<label class="item item-input">
<span class="input-label">Address 1</span>
<input type="text" ng-model="data.section1.address.address_1" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label">Address 2</span>
<input type="text" ng-model="data.section1.address.address_2" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label">Address 3</span>
<input type="text" ng-model="data.section1.address.address_3" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label">Town</span>
<input type="text" ng-model="data.section1.address.town" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label">County</span>
<input type="text" ng-model="data.section1.address.county" ng-disabled="data.uploaded" />
</label>
<label class="item item-input">
<span class="input-label">Postcode</span>
<input type="text" ng-model="data.section1.address.postcode" ng-disabled="data.uploaded" />
</label>
<label class="item item-divider">
</label>
<label class="item item-input">
<span class="inline-highlight">*</span> <span class="input-label">Email Address</span>
<input type="email" ng-model="data.section1.email" ng-disabled="data.uploaded" />
</label>
</div>
</ion-content>