ScrollToBottom on Android scrolls too much!


#1

Hi,

I think there’s a small issue with V2, cause I didn’t remark this problem before.

Editing a field on Android opens of course the virtual keybord and the screen is pushed up (to have the edit field just at the top of it).
If while editing I enable another portion of the view (below the edit field) and then call ScrollToBottom() using setTimeout(), the view moves up too much, hiding the edit field and the newly enabled portion.

I have to manually scroll down to see again my view.

This behavior seems not to appear on iOs.

To replicate the problem, I created a brand new app and added android platform to it.

I modified the home.html content as follows:

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Need a longer text to test scrolling.....
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <ion-item>
    <ion-label>Code:</ion-label>
    <ion-input [(ngModel)]="code"  (input)="codeEdited()"></ion-input>
  </ion-item>
	<ion-card *ngIf="codeOk">
		<ion-card-content>
      <p>
        This starter project comes with simple tabs-based layout for apps
        that are going to primarily use a Tabbed UI.
      </p>
      <p>
        Take a look at the <code>src/pages/</code> directory to add or change tabs,
        update any existing page or create new pages.
      </p>
		</ion-card-content>
	</ion-card>
  <div *ngIf="codeOk">
  <span  item-left>
    <button ion-button color="primary" outline round >Code Ok</button>
  </span>
  <span item-right>
    <button ion-button color="primary" outline round>Code KO</button>
  </span>
  </div>

</ion-content>

Finally I added this method to home.ts:

  codeEdited() {
    if (this.code.length >= 6) {
      this.codeOk = true;
      let localThis = this;
      setTimeout(function() {
        localThis.content.scrollToBottom();
      }, 200);
    }
    else
     this.codeOk = false;
  }