I am having some issues in a form I am creating. This form:
<form name="myForm">
<label ng-hide="hide" class="item item-input" >
<span class="input-label">How much minutes?</span>
<input ng-pattern="onlyNumbers" name="number" type="text" ng-model="taskMinutes">
</label>
</form>
Is almost in the middle of the screen but when the user taps on the input field to start typing, the focus is not being correctly executed. The keyboard shows but it is hiding the field. If I start typing, the focus gets executed and the screen moves accordingly. Any tips on how I can fix this?
Update: This is the whole screen:
<ion-view>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Task</span>
<input type="text" ng-model="taskInfo">
</label>
<label class="item "> Can this task be measured?
<p>
<ion-checkbox ng-repeat="item in devList"
ng-model="item.checked"
ng-checked="item.checked"
ng-click="change(item)">
{{ item.text }}
</ion-checkbox>
</p>
</label>
<form name="myForm">
<label ng-hide="hide" class="item item-input" >
<span class="input-label">How much minutes?</span>
<input ng-pattern="onlyNumbers" name="number" type="tel" ng-model="taskMinutes">
</label>
</form>
<label class="item" ng-controller="tasksCtrl">
<button ng-disabled="!myForm.number.$valid" class="button button-block button-royal" type="submit" ng-click="addTask()">Add Task</button>
</label>
</div>
See Question&Answers more detail:os