Page scrolling does not seem to be working if the touch event starts on an input. This makes it nearly impossible to scroll the page if the page is mostly filled with inputs. Scrolling works if the touch event starts anywhere else on the page (including the padding area of the label surrounding the input).
My current view looks like this:
<view>
<content has-header="true">
<refresher></refresher>
<div class="list">
<label class="item item-input">
<input type="text" />
</label>
</div>
</content>
</view>
Is there something I am missing?
I have made a workaround, by modifying the implementation of inputs slightly. I have put the label inline with the input (rather than containing it). I position the label absolutely with a width and height of 100% so it sits on top of the input (this means focus will still work correctly). And when the input has focus its z-index changes so it sits on top of the label (so the user can still interact with it). It also needs to have matching ‘for’ and ‘id’ attributes on the label and input so the label knows where to apply focus:
<view>
<content has-header="true">
<refresher></refresher>
<div class="list">
<div class="item item-input">
<label for="myInput"></label>
<input id="myInput" type="text" />
</div>
</div>
</content>
</view>
label {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
input {
z-index: 0;
}
input:focus {
z-index: 1;
}