6

I am using PhoneGap 2.9 on Galaxy Note 3. I have a layout similar to Facebook mobile's. It has a nav bar that slides out from the left. The issue I am having is that when the the buttons for the nav bar exceed the size of the screen and need to scroll, they are unable to be tapped. That is, they do not perform their expected functions, and the tap/click event does not fire. The nav bar still responds to swiping, and scrolls properly though.

Its almost as if the parent element of the buttons, an HTML nav element, is receiving the touch events, but some sort of imaginary wall is keeping the child elements from being tapped. Any pointers would be appreciated.

edit: In eclipse I noticed that i have been getting some output that I did not get with 4.2.1, or Android 4.2.2

WebViewInputDispatcher blockWebkitDraw
WebViewInputDispatcher blockWebkitDraw lockedfalse
webview                blockWebkitViewMessage = false

edit: I have noticed that the very top button on my navbar is tappable, but only on its upper edge/border area.

Mike_G
  • 16,237
  • 14
  • 70
  • 101

2 Answers2

15

Turns out this was easily solved by the old CSS transform trick that seems to cure all of Androids webview ills. I just added this css class to the scrolling navbar:

.androidpaintfix {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
}
Mike_G
  • 16,237
  • 14
  • 70
  • 101
  • 1
    I have no idea why this fixed my problem, but it did. I had a bunch of line item divs with ontouch events inside a wrapper div with overflow:scroll. For some reason, when that wrapper div was scrolled to the top, only ONE touch event would fire. You'd have to scroll to then register subsequent clicks. If it was scrolled even 1 px down it worked perfectly (as many clicks as you wanted), but at the top only exactly one... I was about to rip my hair out. Put those styles on the wrapper and problem solved. THANK YOU! – isick Feb 14 '14 at 01:11
  • 1
    I had the same problem here: a bunch of tap-able elements inside a wrapper that had `overflow: scroll; -webkit-overflow-scrolling: touch;`. I couldn't find out why the elements weren't responding. Chrome and iOS were fine but Android was really bugging me! I don't know how you ever found this one out but you easily just saved me a couple of hours of debugging and stuff. – Giel Berkers Apr 17 '14 at 13:52
  • I did that but it does not work I did it to the webview WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true); – angel Dec 11 '15 at 23:39
1

I tried with the other answer (modifing the css but it does not work) then I suposse I coulde enable javascript to the webview and this works

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
angel
  • 4,474
  • 12
  • 57
  • 89