The chaotic world of Android WebKit versions 2.x and 3.x

I have been working on an Android app and my goal is to make it compatible with Android versions 2.2 and above. Currently, due to issues with the WebView control, I am restricted to targeting Android 4.0 and higher.
The app primarily uses HTML, CSS, JavaScript, and jQuery.

The div.appList displays a list of apps, and when clicked, the app should open. However, there is an issue here; in order for the list to be scrollable, I have to add overflow: scroll; to its parent. This works perfectly fine in Android 3.0 and above. But in Android 2.x, the list remains unscrollable.
I mentioned it worked fine in Android 3.0, right? Well, the scrolling does work. The problem now is that click events are not being registered. When a user taps on an item in the list, the click event doesn't get triggered, probably because it's detected as a scroll action. Disabling scrolling makes the items clickable again, but then the list becomes useless as only the top few items can be accessed.

Everything functions properly in Android 4.0 and higher.

Any assistance would be greatly appreciated.

HTML

... ... ...

I welcome any suggestions that can help me achieve compatibility with older versions. While I'm aiming for Android 2.x support, making it work on version 3.2 and above would already bring me a lot of joy.

javascriptandroidjqueryhtmlcss

Answer №1

overflow:scroll|auto doesn't function properly on older Android 2.X devices. Instead, this CSS rule behaves similarly to overflow:hidden :)

While the issue cannot be fixed directly, using plugins can help circumvent this behavior. For example, you may consider using

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining mouse interactions with animated bar transitions

I want to create a graph with dynamic bar height transitions whenever it is drawn or redrawn. Once the bars are displayed, I would like mouse events (mouseenter, mouseleave, and mousemove) to trigger a tooltip showing information about the specific bar bei ...

javascripthtmld3.jsmouseevent

Utilizing a dropdown selection to trigger an IF statement in a function

I have an HTML code snippet as shown below: The value "Test" is just for my reference to ensure that the code is functioning properly :) <script> var tfa78 = document.getElementById("tfa_78").selvalue; if( tfa78 == "karte" ) { document.getEl ...

javascript

The HTML modal window is experiencing loading issues

I am attempting to implement a modal box that appears on click in an HTML document. The HTML code looks like this: <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> </div> <a href="#openModal">O ...

javascriptjqueryhtmlmodal-dialog

Can you suggest some unconventional HTML/CSS attributes and tools for arranging a form in a way that results in a unique tab order?

As part of my role, I am tasked with transforming mock specs provided by our clients into custom web forms. Our application comes equipped with tools specifically developed to streamline this process. Recently, I was presented with a particularly intriguin ...

htmlcss

What is the most efficient way to calculate the current percentage of time that has elapsed today

Is there a way to calculate the current time elapsed percentage of today's time using either JavaScript or PHP? Any tips on how to achieve this? ...

phpjavascriptjquery

Sending a value to a different Ionic page based on a specific condition

Here is the code snippet from my app.js: var app = angular.module('dbpjkApps', ['ionic']) app.controller('kategoriCtrl', function($scope) { $scope.listKat = [ {kat: 'math'}, {kat: 'physics'}, ...

javascriptandroidangularjsionic-framework

Identifying CSS when the height of the browser is smaller than the height of the device

On my page, I am facing a situation where the CSS of an element needs to be adjusted for devices like the Nexus 5X. These devices have 'Android nav bars' at the top and bottom, which can push elements around on the page. Currently, I am using jQ ...

css

Mastering Yii2: Implementing Javascript Functions such as onchange() in a View

One of the elements in my project is a checkbox: <div class="checkbox"> <label> <?= Html::checkbox('chocolate', false) ?> Chocolate </label> </div> In addition to that, I also have a span ta ...

javascriptphphtmlyii2onchange

Ajax modal login feature refuses to close

Struggling to close a modal login box? Everything seems to be functioning correctly with the modal screen and ajax features, but I'm facing issues when it comes to closing the modal form. The code snippet looks like this: HTML: <a href="#" cla ...

javascriptphpjqueryajaxmodal-dialog

The cascading style sheet used by a lightbox

I constructed a lightbox using the following HTML code: <a id="show-panel" href="#">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center" ...

jqueryhtmlcsslightbox

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

htmlangularjsmodel-view-controller

Using Chrome to gather data from a website's tables

I am trying to scrape table data from a website using Selenium with the Chrome browser. I have written the code below, but it seems to be not working as expected. Sub Chartinka() Dim bot As New WebDriver, posts As WebElements, post As WebElement, i ...

htmlexcelvbaseleniumweb-scraping

Layers of CSS images

Is there a way to create multiple layers for images on a webpage so they can move independently without affecting other elements? I attempted to use z-index, which did work, but it caused the page to increase in height. Additionally, when using jQuery.posi ...

cssimagelayer

Why does the Google Tag Manager noscript tag show up as a string when using react-gtm-module?

Implementing Google Tag Manager Tags in a React/Next.js app hosted on Netlify, I used the react-gtm-module. While the gtm script tag in the head section works perfectly, the noscript tag in the body is displaying an iframe as a string: <body> < ...

javascriptreactjsgoogle-tag-managernext.jsnetlify

Is it necessary to generate a file for each API in Next.js?

When working with Next.js, it is common practice to create a separate file for each new API endpoint. For example, for the /user endpoint, there would be a user.js file with its own handler, and another one for /user/goldmember. Some may argue that this ...

javascriptnext.js

Setting the base path for a statically exported NextJS app

I am in the process of developing and deploying a React / NextJS application to a Weblogic J2EE server with a specific context. While I have some experience with React, I am relatively new to NextJS. The current steps for building and verifying the app ar ...

javascriptnext.jswar

Incorporate an Angular app into an existing application and seamlessly transfer the data

I am currently in the process of integrating an Angular app into an existing jQuery application. Let's say I have a basic button in my HTML code. My goal is to load the Angular app and execute controller code when the button is clicked. To achieve t ...

javascriptjqueryangularjs

Customizing Mouse Pointers in CSS

My goal is to customize the click pointer on a website using CSS. I have successfully changed the default cursor, but now I am seeking help in changing different 'versions' of the cursor. Here's my current attempt at customizing the pointe ...

csscursormouse

Is it possible to leverage both functions and variables within the ng-options expression in Angularjs?

I am faced with a situation where I have 2 select boxes. The first one is used to choose the user type (such as groups or individual), and the second one displays the options based on the selection made in the first box. I was wondering if it is possible t ...

javascriptangularjs

In PHP, business days come to a halt during the weekends, prompting a fresh start on Monday for

Greetings! I have been utilizing a code snippet found from a previous inquiry, which increases the end day by two days in cases where it falls on a weekend. function add_business_days($start_date, $business_days, $holidays, $date_format){ $i = 1; $day ...

phpjquerydatetimeweekend