ionic and cordova - css active not working on android device

Question

I am using ionic framework with cordova platform. The css for active state of an element (div, button or a) works fine in browser during development/testing but not at all in android device/emulator

i have defined some classes

.bg-dark {
 background: #333333 !important;
}

.bg-active-darkBlue:active {
background: #16499a !important;
}

and following html

<a class="fg-white bg-active-darkBlue button" style="background-color:#3B5998;">Sign in with Facebook</a>

even tried this (got on ionic forum)

<a ng-mousedown="class='bg-active-darkBlue'" ng-mouseup="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>

tried for a,div and button tags. still not working on android, only works in browser, please help.

Answer 1

By experience, angular ng-mousedown and ng-mouseup events do not fire up on the mobile device. My experience was ionic 1.6.4 on iOS.

However, on-touch and on-release works flawlessly well. So just replace ng-mousedown and ng-mouseup with on-touch and on-release , respectively.

<a on-touch="class='bg-active-darkBlue'" on-release="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>

Here is the pointer to the ionic reference documentation on the on-touch and on-release events.

Hope this helps..

Answer 2

Apparently, the "right" way of doing this is according to phonegap-tips.com is to add an ontouchstart="return true;" on the element.

eg.

<a class="bg-active-darkBlue" ontouchstart="return true;">:active now works in cordova</a>

That worked for me, so I hope it works for you too.