Tap highlight color

ionic-v1
1

Hi,
How can disable android’s default tap color property. I have div on which i have applied ng-click directive. When i tap on this div its back ground color changes to grey. I tried applying class .disable-user-behavior on this div but its not working. Here is the code i am using. I am testing it on android 4.3 on simulator

{{homeTitle}} 
            <div style="text-align: left;" class="row">
                <!-- <div style="float: left;" class="{{notification.category}}"><i class="icon {{notification.icon}}" style="font-size: 35px"></i></div>-->
                <div style="width: 100%;margin-bottom: 8px;" class="{{notification.type}}">
                    <div style="font-size: 1.2em;border-bottom: 1px solid rgb(221,221,221);word-wrap: break-word;white-space: normal">{{notification.name}}
                         <span style="float: right" class="selectedalt">
                             <i class="icon ion-speakerphone" ng-if="notification.type == 'Announcement'"></i>
                             <i class="icon ion-calendar" ng-if="notification.type == 'Event'"></i>
                             <i class="icon ion-compose" ng-if="notification.type == 'Note'"></i>
                             <i class="icon ion-ios7-copy" ng-if="notification.type == 'Assignment'"></i>
                         </span>
                    </div>
                </div>
            </div>
            <div style="font-size: 0.9em;" ng-if="currentUser.primaryInfo.userRole != 'ipath_app_group_student' && notification.className != '' || notification.className != null">
                <span> {{notification.className }} </span> <span style="font-size: 0.85em" ng-show="notification.subjectName"> : {{notification.subjectName}}</span>
            </div>
            <div style="font-size: 0.9em;" ng-if="currentUser.primaryInfo.userRole != 'ipath_app_group_student' && notification.siteName != '' || notification.siteName != null">
                <span> {{notification.siteName }} </span>
            </div>
            <div style="word-wrap: break-word;white-space: normal;margin-bottom: 8px;font-size: 0.9em">
                {{notification.description}}
            </div>
            <div style="font-size: 0.85em; color: #a2a2a2" ng-if = "notification.submissionDate">
                Due On: {{notification.submissionDate|date:'MMM d ,yyyy'}}
            </div>
            <div ng-if="notification.fromDate" style="font-size: 0.70em; color: #a2a2a2">
                Event timings: {{notification.fromDate | date:'MMM d,yyyy hh:mm a'}} <span ng-if="notification.toDate != notification.fromDate"> to {{notification.toDate | date:'MMM d,yyyy hh:mm a'}}</span>
            </div>
            <div>
                <div style="float: left;padding-left: 50px;min-height: 50px;padding-top: 5px;">
                    <span><img src="assets/img/user_default.png" style="position: absolute;left: 15px;max-height: 40px;max-width: 40px;width: 100%;"></span>
                </div>
                <div style="border-top: 1px solid rgb(221,221,221);padding-top: 2px">
                    <span style="font-size: small">{{notification.postedBy | titlecase}}</span>
                    <!--<span style="float: right;position: relative;top: -3px;right: -10px;/*color: #5E2612*/margin-left: 5px" class="custom-button">
                         <i class="icon ion-calendar" style="font-size: 2em"></i><i class="icon ion-plus" style="font-size: 0.6em;margin-left: 1px;position: absolute"></i>
                     </span>-->
                <span style="float: right;position: relative;top: -3px;right: -10px;/*color: #5E2612;*/margin-left: 5px" class="custom-button" ng-if="notification.type === 'Note'">
                    <i class="icon ion-ios7-redo" style="font-size: 2em;"></i>
                </span>
                <span style="float: right;position: relative;top: -3px;right: -10px;/*color: #5E2612;*/margin-left: 5px" ng-if="notification.attachmentName"  class="custom-button" ng-click="downloadAttachment(notification.downloadURL,notification.attachmentName,$event)">
                    <i class="icon ion-paperclip" style="font-size: 2em;"></i>
                </span>
                </div>
                <div style="font-size: small;color: #aaaaaa">{{notification.date | date:'MMM d,yyyy hh:mm a'}}</div>
            </div>
            <div style="font-size: 0.86em;border-top:1px solid rgb(221,221,221);padding-top: 5px;padding-left: 10px;padding-bottom: 5px;color: #9c8d4e" ng-if="notification.studentName">
                {{notification.studentName}}
            </div>
            <!--<span ng-switch-when = "Note" style="position: absolute;top: 0;right: 3px" ng-class="notification.priority"> <i class="icon ion-star"></i></span>-->
        </div>
        <span style="position: absolute;top: 90px;width: 100%;text-align: center;color: rgba(132, 124, 120, 0.70)" ng-show="filteredNotifications.length == 0">
            No data to display ...
        </span>
</ion-list>
2

This should be done by default by ionic…

Anyways, you can use this css property:

-webkit-tap-highlight-color: rgba(0,0,0,0);
3

I still get a grey background on the padding highlighted on click.
For iOS this worked, but not for android.
Please help

4

Check the example, with ng-click the activated class is applied

<div class="item" on-tap="signOut()" ng-click="javascript:void(0)">
  <h2>Sign out</h2>
</div>

Regards, Nicholls

5

Thanks @jdnichollsc !
Check this one, it’s also optimized solution!
Thank you for helping :slight_smile:
Regards,
Rachna

1 Like