Scrolling not working on inputs

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;
}
2 Likes

Nice work around. I am having this same issue. Does anyone know another fix to this issue that doesn’t require adding a label?

I too
have the same scrolling issue after applying the above code my scrolling problem resolved but i am unable to get the focus on my input. As any of the inputs are no longer focusable so i am unable to type in any of my input textboxes.

Make sure your labels ‘for’ attribute matches the inputs ‘id’. Then the input should get focus when you click/tap the label.