Hi there, I have an issue with a form. The form load correctly, but when I update one field and I click somewhere else and the keyboard close, the form disapear. The form is still there as I can click blindly and find a field, but everything seems transparent! Here some pictures:
Selecting a field and update value
Leaving the field and going to the next field (or another one)
The data is there… we can select it
I can make the form reappear when I initate the swipe action in order to display the right side menu for example (as soon as I move the page 1px by swipping, it redraws perfectly)
My analysis so far:
-
Do this only on IOS native (preview from xCode), web view through Ionic Serve is OK, IOS Emulate is OK also.
-
Not related to CSS. My css customization are overrides. I tried removing my overrides css AND I have the same issue.
Here is the code of my form:
`
<form name="addForm" novalidate="" ng-submit="vm.addMoto()">
<div class="list">
<label class="item item-input item-select" ng-class="{ 'has-errors' : addForm.make.$invalid, 'no-errors' : addForm.make.$valid}">
<div class="input-label">
Make
</div>
<select name="make" ng-model="vm.newmoto.make" ng-minlength="1" ng-maxlength="20" required>
<option value="kawasaki">Kawasaki</option>
<option value-"honda">Honda</option>
<option value-"suzuki">Suzuki</option>
<option value-"yamaha">Yahama</option>
</select>
</label>
<div class="error-container" ng-show="addForm.make.$error" ng-messages="addForm.make.$error">
<div ng-messages-include="error-list.html"></div>
</div>
<label class="item item-input" ng-class="{ 'has-errors' : addForm.model.$invalid && addForm.$submitted, 'no-errors' : addForm.model.$valid && addForm.$submitted}">
<span class="input-label">Model</span>
<input type="text" name="model" ng-model="vm.newmoto.model" ng-minlength="1" ng-maxlength="20" required>
</label>
<div class="error-container last-error-container" ng-show="addForm.model.$error && addForm.$submitted" ng-messages="addForm.model.$error">
<div ng-messages-include="error-list.html"></div>
</div>
<label class="item item-input" ng-class="{ 'has-errors' : addForm.year.$invalid && addForm.$submitted, 'no-errors' : addForm.year.$valid && addForm.$submitted}">
<span class="input-label">Year</span>
<input type="number" name="year" ng-model="vm.newmoto.year" required>
</label>
<div class="error-container last-error-container" ng-show="addForm.year.$error && addForm.$submitted" ng-messages="addForm.year.$error">
<div ng-messages-include="error-list.html"></div>
</div>
<label class="item item-input" ng-class="{ 'has-errors' : addForm.mileage.$invalid && addForm.$submitted, 'no-errors' : addForm.mileage.$valid && addForm.$submitted}">
<span class="input-label">Mileage</span>
<input type="number" name="mileage" ng-model="vm.newmoto.mileage" required>
</label>
<div class="error-container last-error-container" ng-show="addForm.mileage.$error && addForm.$submitted" ng-messages="addForm.mileage.$error">
<div ng-messages-include="error-list.html"></div>
</div>
<label class="item item-input" ng-class="{ 'has-errors' : addForm.displayName.$invalid && addForm.$submitted, 'no-errors' : addForm.displayName.$valid && addForm.$submitted}">
<span class="input-label">Nickname</span>
<input type="number" name="displayName" ng-model="vm.newmoto.displayName" required>
</label>
<div class="error-container last-error-container" ng-show="addForm.displayName.$error && addForm.$submitted" ng-messages="addForm.displayName.$error">
<div ng-messages-include="error-list.html"></div>
</div>
</div>
<button class="button button-block button-royal" type="submit">
Save this moto
</button>
</form>
</ion-content>
`