No-tap-scroll not working


#1

Hi,

I’m also working on little chat application and having a problem with no-tap-scroll attribute in my header. So in general I’m using ScrollBottomCtrl to scroll on the bottom and after I click on my header it returns again to the top. Any hints ?
regards

<ion-view title="Chat" left-buttons="leftButtons" ng-controller="ChatController" >
<ion-nav-bar class="bar-energized" no-tap-scroll="true">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
    <h1 class="title"></h1>
</ion-nav-bar>
<ion-content has-header="true" padding="true" class="has-header content-bottom">
        <ol class="messages" ng-controller="ScrollBottomCtrl">
            <li  ng-class="{'receiver': !message.isSender,'sender': message.isSender}" ng-repeat="message in messages track by $index" ng-bind-html="message.content">{{className}}</li>
        </ol>
</ion-content>
<ion-footer-bar class="bar-frosted" style="height:70px">
    <div class="item item-input-inset" style="width: 100%; ">
        <label class="item-input-wrapper"  style="margin-left: 10px">
            <input type="text" ng-model="inputChat" placeholder="Message">
        </label>
        <button class="button button-small button-balanced" ng-click="sendMessage()">Send</button>
    </div>
</ion-footer-bar>

Controler

 .controller('ScrollBottomCtrl', function ($scope, $state, $ionicScrollDelegate) {
    $ionicScrollDelegate.scrollBottom(false);

})

#2

Hmm, I just tested no-tap-scroll="true" and it worked fine for me. Any chance you could try to provide a codepen illustrating this?


#3

I think that i upload some of the oldest versions of Ionic. It works for me in code pen also. I’ll try with the latest one. Since my project is quite big at the moment, i don’t update it every time when new version arrives.


#4

Ah yeah, you could have been using a version on ionic where no-tap didn’t exist yet


#5

Thnx for reply and support anyway.

Regards,


#6

Hi @mhartington i’ve the same problem… i search for the No-tap-scroll in ionic-angular.js file and i found:

if (isDefined($attrs.noTapScroll)) headerBarEle.attr('no-tap-scroll', $attrs.noTapScroll);

So i think i’ve a version that include this function, but in my project it not works.
My code is this:

<ion-header-bar no-tap-scroll="true" align-title="center" class="bar-header bar-light">
        <div class="col col-10 col-offset-10">
            <i class="icon ion-checkmark-round iconWorked"></i>
        </div>
        <div class="col col-10 ion-clock icon iconPermission"></div>
        <div class="col col-10 ion-medkit icon iconDisease"></div>
        <div class="col col-10 ion-plane icon iconVacation"></div>
    </ion-header-bar>
    <ion-header-bar align-title="center" class="bar-subheader bar-light">
        <button class="button button-icon icon ion-ios-arrow-thin-left" ng-click="cc.prevMonth()"></button>
        <h1 class="title">
            <button class="button button-icon icon ion-calendar monthButton"> {{cc.months[cc.currentMonth].name}} {{cc.currentYear}}</button>
        </h1>
        <button class="button button-icon icon ion-ios-arrow-thin-right" ng-click="cc.nextMonth()"></button>
    </ion-header-bar>

Could you help me?


#7

Hmm, I just tested out that header and it seems to be working fine for me.


#8

Thanks for help @mhartington, i try again but it doesn’t work anyway. My colleague solve it declearing the block of the four icon inside a tag

<div class="bar bar-subheader row">

and remove the first header.
The code now are:

<div class="bar bar-subheader row">
    <div class="col col-25 textCenter">
        <i class="ion-checkmark-round iconWorked"></i> {{cc.counters[0].count}}
    </div>
    <div class="col col-25 textCenter">
        <i class="ion-clock iconPermission"></i> {{cc.counters[1].count}}
    </div>
    <div class="col col-25 textCenter">
        <i class="ion-medkit iconDisease"></i> {{cc.counters[2].count}}
    </div>
    <div class="col col-25 textCenter">
        <i class="ion-help-buoy iconVacation"></i> {{cc.counters[3].count}}
    </div>
    <!--<div class="col col-20 textCenter">
        <a href="" class="todayButtonBack" on-touch="backToCurrentMonth()">Oggi</a>
    </div>-->
</div>
<div class="bar has-subheader">
    <button class="button button-icon icon ion-ios-arrow-thin-left" on-touch="prevMonth()" id="prevButton"></button>
    <h1 class="title">
        <button class="button button-icon icon ion-calendar monthButton pointerBlocked" on-touch="backToCurrentMonth()"> {{cc.months[cc.currentMonth].monthName}} {{cc.currentYear}}</button>
    </h1>
    <button class="button button-icon icon ion-ios-arrow-thin-right" on-touch="nextMonth()" id="nextButton"></button>
</div>