issue - scrolling on device : scroll to top

[dylanvdmerwe]

Short description of the problem:

It would be great to be able to programatically move an ion-list scroll position. For example: scrollToTop() or scrollToBottom() methods.

What behavior are you expecting?

Especially on Android, after the keyboard is open, the padding added to the bottom of the screen does not go away (this may be a bug?). As such, I sometimes need to scroll the screen back to the top as the scrolling position is whack.

Which Ionic Version? 2.x

** Platforms: All

[jgw96]

Hello, thanks for submitting your issue! Would you be able to provide some code (repo, codepen etc) so that we can repro the issue? Also would you mind running ionic info and pasting the content here?

[dylanvdmerwe]

Alright here is an example to run on an Android device. Have yet to try this on iOS.

On the device, press one of the lower ion-inputs. The keyboard should open up and the ion-list will scroll so that the image is not visible. When you hide the keyboard, the content does not return to it's original position. If I press the Next button and the div's swap, you'll see why I want a scrollToTop() function to fix the ion-list scroll position.

Ultimately it would be best for the padding to go away back to how it was after the keyboard is dismissed.

TS

export class Page1 {
    swap : boolean;

    next() {
        this.swap = !this.swap;
    }
}

HTML

<ion-navbar *navbar>
    <ion-title>Tab 1</ion-title>
</ion-navbar>

<ion-content>
    <ion-list>
        <img src='https://www.google.co.za/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' style='width:80%; margin-bottom:50px'>
        <div [hidden]='swap'>
            <form>
                <ion-item>
                    <ion-label>University</ion-label>
                    <ion-input type='text' placeholder='Enter your course'></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>University</ion-label>
                    <ion-input type='text' placeholder='Enter your course'></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>University</ion-label>
                    <ion-input type='text' placeholder='Enter your course'></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>University</ion-label>
                    <ion-input type='text' placeholder='Enter your course'></ion-input>
                </ion-item>
            </form>
        </div>
        <div [hidden]='!swap'>
            <h1>test</h1>
        </div>
        <button (click)='next()'>Next</button>
    </ion-list>
</ion-content>

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.3.0

[dylanvdmerwe]

I think #5536 is also referring to the same issue.

[EvanWillms]

I'm tagging reports of the keyboard padding overstaying its welcome back to #5432 as a canonical issue.

This thread still has the initial feature request outstanding.

[adamdbradley]

This should be fixed in this commit: e21c4d5

Also, ion-content does have scrollTo and scrollToTop methods: http://ionicframework.com/docs/v2/api/components/content/Content/#scrollToTop

Hope that helps, thanks for the report

[nunoarruda]

No love for scrollToBottom() ? It would handy in my current Ionic project.

[dylanvdmerwe]

@nunoarruda: See bef4a67

[nunoarruda]

@dylanvdmerwe yeah, Adam notified me after making that commit. Thanks anyway!