Tap Modal Header Fires scrollTop on Underlying List

[calendee]

Scenario : View has a list that has been scrolled down. In view, open a modal that also has a list. Scroll down the list in the modal. Tap the Modal's header bar. The Modal's list is not scrolled to the top. However, the underlying list is scrolled to the top.

Sample : http://codepen.io/calendee/pen/DfxFw

In this sample, scroll down on the main list. Open the modal. Scroll down a little. Tap the modal header. The modal list does not scroll top. The underlying list down.

Versions Affected : Beta 4
Semi-related Issue : #1199

Semi-related Forum : http://forum.ionicframework.com/t/scrolltop-bottom-within-a-modal/3978/2

[ajoslin]

Thanks @calendee, fixing.

[calendee]

@ajoslin Andy this partially fixed the problem. If you see my sample, you'll notice that tapping the header in the Modal properly scrolls the Modal list. However, it still scrolls the underlying list as well.

[ajoslin]

It does work in the master build, however that isn't all the way built into nightly yet.

[juliancesar]

The default behavior tap on top to scroll up doesnt work anymore in iOS 7 in Beta 5! Somebody with same problem?

[ajoslin]

Can you show me the markup of your header bar and content, and what relates them?

They have to be siblings in the DOM.

And that should be noted in the docs.
On May 14, 2014 6:10 PM, "Julian Cesar" notifications@github.com wrote:

The default behavior tap on top to scroll up doesnt work anymore in iOS 7
in Beta 5! Somebody with same problem?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1329#issuecomment-43155644
.

[juliancesar]

I'm using side menu and templates, then my structure is:

<ion-side-menu-content>

    <ion-nav-bar class="bar-gekoop nav-title-slide-ios7">
        <ion-nav-back-button class="button-icon ion-arrow-left-c button-header">
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-buttons side="left">
        <button class="button button-icon button ion-navicon" ng-click="toggleLeft()">
        </button>
    </ion-nav-buttons>

    <ion-nav-view name="menuContent" animation="slide-left-right">

        <!-- START TEMPLATE -->
        <ion-nav-buttons side="right">
            <button class="button button-icon button-header ion-ios7-plus-outline" ng-click="goTo('main.take')"></button>
        </ion-nav-buttons>
        <ion-view hide-back-button="true" title="TITLE" class="main-content">
            <ion-content padding="false">
                <ion-list>
                    <!-- LIST -->
                </ion-list>
            </ion-content>
        </ion-view>
        <!-- END TEMPLATE -->

    </ion-nav-view>

</ion-side-menu-content> 

How can i fix this!?

[juliancesar]

@ajoslin , can you help me, or is a new bug?

[ajoslin]

Its new, related to a recent bug fix. I think I know how to fix it, but
it'll have to wait until Monday.
On May 16, 2014 6:34 PM, "Julian Cesar" notifications@github.com wrote:

@ajoslin https://github.com/ajoslin , can you help me, or is a new bug?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1329#issuecomment-43392378
.

[hyoungopb]

Are you sure this is working in beta 11?

[hyoungopb]

This doesn't seem to be working in beta 11. When i click on the header in my modal, it scrolls the underlying content. I just upgraded from beta 6 (where it had been working correctly).

[hyoungopb]

This appears to be broken again in beta 11 (I just upgraded and it had been working in beta 6). Clicking on a modal header scrolls the underlying view. Clicking on the grey area around the modal does not scroll the underlying view.

[jamesearlywine]

I'm having the same problem. How can I stop it from scrolling the underlying list?

[jamesearlywine]

nevermind, no-tap-scroll worked. First I had a typo, then my template was being loaded from cache and not reflecting the no-tap-scroll change.

Thanks for the tips above. :)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.