This tricky bug is causing quite the headache.
Check out Android ticket 6721 for a demonstration of how the Android browser fails to adhere to z-index rules with absolutely positioned elements overlapping <a> or <input> tags.
I desperately need a workaround. Any brave souls tackled this issue before?
Your help would be greatly appreciated!
This issue appears to be linked to controls that are specially designed for the browser. While investigating this problem in chromium, I came across a similar issue where pressing the tab key still allowed focusing on input elements. This is likely not desired behavior (even if it's just bleedthrough). The solution is surprisingly simple - you can modify your script to add the disabled attribute to all overlayed input/button/etc. elements. A disabled input will prevent it from receiving focus (via keyboard or other means), and clicking on it should also become impossible.
By disabling unnecessary keyboard navigation, this approach not only serves as a fix but also enhances the overall design, ensuring smoother keyboard-based navigation experience.
When addressing the question at hand, it is essential to refer to the bug page for a thorough understanding. The issue lies not in the visibility of the input below, but rather in its "clickability."
While I am unable to test this myself, there are some potential solutions worth considering:
0 Instead of using absolute positioning, consider employing two divs and toggling their visibility.
If this approach does not meet your needs...
1 Experiment with setting CSS position to either absolute or relative for all a and input tags (although this may require adjusting your CSS layout).
2 Create an <a>-tag container:
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
Insert content here
</a></div>
Additional CSS adjustments will likely be necessary to ensure the appearance of the content remains intact. However, implementing something similar to this might resolve the issue.
If attempts 1 and 2 prove ineffective, try combining them simultaneously ;)
3 In the event that the problem persists, delve deeper into the specific interactions occurring upon clicking. Bind click and mousedown events to: link on top, container on top, input in the bottom, and log them. If any of these events occur on the top link, consider stopping the bubbling process at a certain point or preventing the event from reaching the input at the bottom.
This undertaking may be challenging, but I would be glad to offer some assistance. Utilizing jQuery could greatly aid in this endeavor.
Past solutions to address this issue in Internet Explorer have included a variety of methods, some of which are outlined below. While originally intended for IE, these approaches could potentially resolve the problem in Android as well.
Place an iframe behind the absolute content to potentially hide troublesome elements
Utilize JavaScript to conceal problematic elements when displaying absolute content
Arrange the divs in reverse order to see if it impacts the rendering
The first method is often considered the most effective for Internet Explorer, although it may not be the most elegant solution for your specific case.
For all elements causing issues, make sure to include the following CSS:
-webkit-backface-visibility: hidden;
Imitate USER INPUT and A using DIV elements.
[SIMULATED JQUERY CODE]
<div href="http://google.com" rel="a">Link</div>
<div class="field">
<div></div>
<input type="text" style="display: none" />
</div>
<script>
$('div[rel=a]).click(function() {
location.href = $(this).attr('href');
});
$('.field > div').click(function() {
$(this).hide();
$('.field > input').show();
});
$('.field > input').blur(function() {
$(this).hide();
$('.field > div').html($(this).val()).show();
});
</script>
When dealing with the same issue in IE, the solution involves applying z-index to every element involved in positioning and their containers. Simply adding a z-index to one element in the dom allows IE to understand its z position but not necessarily its relationship to adjacent elements.
For example:
container - z-index 0
child (on top container) - z-index 1
child 2 (above all) - z-index 999
This workaround is primarily for dealing with IE's quirks, but it may be worth experimenting with in Android as well.
Another suggestion:
Although I don't have experience with the Android browser, consider exploring Superfish, a javascript menu that addresses z-index issues when dropdown menus overlap select boxes. They use BgIframe to achieve this effect, so your solution might be found there.
Wrap the following HTML code in a div element and use JavaScript to set its display property to none. This way, the content will not be visible or clickable as a modal.
To tackle this issue successfully, ensure that you apply a z-index to the parent wrapper and clearly define z-index values for all other elements. This will establish a baseline understanding of the z-index property among all elements involved in the solution.
Hello, I am currently stuck on a looping exercise and I could use some assistance. I need to display each iteration of the loop inside a < p > </ p > tag Looping away Looping away Looping away Looping away Looping away Below i ...
I am attempting to develop a unique custom dialog but I have encountered two compilation errors that I need help understanding. The SetOnClickListener method in the view type is not compatible with the arguments new OnClickListner code. The onClick metho ...
Is there a way to add space before bullet points? My requirements are as follows: This is paragraph 1 The first text line The second text line This is paragraph 2 The first text line The second text line I would greatly appreciate any ...
Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...
Shown below is the content of app.js: var express = require('express'); var routes = require('./routes/index'); app = express(); app.use('/', routes); // catch 404 and forward to error handler app.use(function(req, res, next ...
I'm having trouble with tooltips not working properly. The codebase I'm using is from this repository https://github.com/oguilleux/webpack-gulp-wordpress-starter-theme If you need more details, feel free to reach out. Here is my main.js file: ...
I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...
Is there a way to include test steps in an Allure report for Protractor? I am facing an issue where the test steps are not showing up as they do for Java language tests. The official Allure report documentation also does not provide any code samples for ...
When a user shares a link from a website on social media platforms like Reddit or Facebook, an image is usually attached to it. Is there a way to specify which image should appear in the header of the HTML file? I assume that there must be a meta tag, lik ...
In my database, I have three models named "Companies," "Employees," and "Employments." The "Employments" model is set up to have a belongsTo relationship with both a company and an employee. Inversely, every "Employee" should have a hasOne relationship wit ...
I'm attempting to make my main content and menu divs extend up to the bottom of the footer div. Here's my HTML: html, body { margin: 0; padding: 0; height: 100%; } #wrapper { min-height: 100%; position: relative; } #header { paddin ...
How can I make JavaScript recognize a string as JSON? I have a function that only works when passed a JSON object. If I pass a string with the same format as JSON, it doesn't work. I want to find a way for the function to treat the string as JSON, ev ...
import Chatbot from 'react-chatbot-kit' import config from './config' import ActionProvider from './actionProvider' import MessageParser from './messageParser' const ChatBotFlight = () => { return ( <div> ...
function Scan_Insert_Recursive (dir_path) { //scans dir_path recursively and inserts file path into a temporary list Scan_Recursive(dir_path, (err, files) => { //using npm recursive_readdir for scanning if(err) { console.log(err) ...
Here's a query challenge in two parts: I'm working on an express.js file that displays a form requiring data from 2 separate queries in the database. One query populates a select drop-down and the other generates check-boxes. How can I send m ...
I've been struggling with setting up server side rendering with React for the past week. It's a new project using an express server and I'm trying to render a simple hello world react app that utilizes react-router-component. To get some he ...
I've extensively reviewed the official documentation, but I couldn't find a way to adjust the size of the arrow in the React tooltip. <span className="icon margin-10-right txtSize20 txtBlue icon_profile-menu icon-tool" data-tip={`&l ...
I have implemented a breadcrumb feature in my Blazor Server project within the AppLayout that functions for all pages: <ul id="breadcrumbs" class="breadcrumbs"> <li><a href="#">Home</a></li> ...
Suppose I have an event type, such as a click event. I need to initiate 3 separate ajax requests through this event, but I want to listen for the final result of all 3 requests. What would be the most suitable design pattern for implementing this sequence ...
I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...