NEED HELP; Weird issue


#1

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>

`


#2

Hi There,

I’ve struggling with the same problem for days now. In my case, the problem seems to be an element above the form-Inputs wich has no static height, an responsive resized image for example. My html looks like that:

<style type="text/css"> img{ width:100%; height: auto; } </style> ... <ion-pane> <ion-header-bar class="bar bar-header bar-balanced"> <h1 class="title">Title</h1> </ion-header-bar> <ion-content> <div> <img class="mealImg" src="img/test.png"> </div> <div class="list"> <label class="item item-input"> <input type="text" placeholder="Title"> </label> <label class="item item-input"> <input type="text" placeholder="Description"> </label> </div> <div class="padding"> <button class="button button-block button-positive activated">Save</button> </div> </ion-content> </ion-pane>

For me, it seems like it has something to do with the ionic Keyboard-Scrolling. If I deactivate cordova.plugins.Keyboard.disableScroll(true); this bug does not appear anymore, but scrolling seem buggy (e.g. header-bars are scrolling out of the viewport)


#3

Did you tried to remove this content? In my case, I had a H1 and a P above the form and I removed it. The problem still there.

I have 5 fields on my form. When I started removing fields one by one to see if one particular field was causing the problem, I founded out that when there is enough space in the screen for the keyboard to popup without scrolling, I have no issue. (about 2/3rd of the screen must be available). This leads me to think that there must be an issue with the repositioning after the keyboard’s hidden.

I will look at other elements and I will try to hardcode an height for every elements to see if it improves the scrolling calculation.


#4

I think I’ve found the problem.

I’ve added overflow-scroll=“false” to the and it seems to fix the issue.


#5

Where did you added “overflow-scroll=“false””?
I’ve also found this thread: Keyboard closing causes entire page to disappear and it helps… most of the time…
I had an element with ng-show above my form-fields and added an empty div at the same level.


#6

ho sorry… to the

<ion-content overflow-scroll="false" padding="true" class="has-header">


#7

Hey Sebastien,
I’ve ran again into the same problem and now added overflow-scroll…
That really seems to solve the problem! Thanks a lot for the hint!


#8

When I add overflow-scroll=“false” on ios, my ion-content is not scrollable anymore… anyone know how to solve this?