Nasty little bug, this one.
As illustrated in Android ticket 6721, the Android browser seems to not respect z-index when absolutely positioned elements are laid over the top of <a> or <input> tags.
I am desperate for any sort of workaround. Has anybody conquered this one before?
Thanks in advance!
This problem is probably related to controls and their being special for the browser. While looking at your problem (in chromium) I found a related problem that when you press the tab key you will still be able to focus the input elements. You probably don't want this either (regardless of bleedthrough). The solution is surprisingly simple, you write your script to add the disabled attribute to all input/button/etc. elements that are overlayed. A disabled input will not be able to receive focus (by keyboard or otherwise), and clicking it should be impossible.
As this also disables silly keyboard circumnavigation it is not even a workaround, but a better design that also works with keyboard based navigation as expected.
To answer the question properly it's important to read the bug page. The problem is not about visibility of the input below, but its "clickability".
I can't test it, but these are possible workarounds:
0 Forget absolute positioning and just put two divs there and toggle visibility.
If this doesn't satisfy You...
1 try setting CSS position to absolute or relative for all a and input tags (Yup, this might force You to rewrite CSS to keep the layout, but isn't it worth it?)
2 make a <a>-tag container:
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
stuff here
</a></div>
This will need some more CSS to make the content look ok. But I expect something like this would solve the problem.
if 1 and 2 aren't helping try them both at once ;)
3 if it still happens You might want to check in details what happens when You click. Bind click and mousedown events to: link on top, container on top, input in the bottom and log them. If You get any of those events for the top link You can try and stop the bubbling at some moment or prevent the event on the input in the bottom.
This would be difficult, but I can help a bit. jQuery would be quite necessary.
Past fixes for this issue for IE include, but are probably not limited to the following list. These may help solve the problem in Android for you.
Put an iframe behind the absolute content. The iframe may obscure those elements for you
When you display your absolute content, hide all of the problem elements with JavaScript
Define the div's in the opposite order
Point number 1 is deemed the most reliable fix for IE, but may not be the nicest fix for you.
Add this to the CSS of every element that creates a problem:
-webkit-backface-visibility: hidden;
Simulate INPUT and A with DIVs.
[PSEUDO 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>
IE has this same problem and the solution there is to make sure that every element that is involved in the positioning and even their containers have a z-index applied to them. Basically if you add a z-index to 1 element in the dom then IE gets understands its z position but doesn't understand its z position relative to what its next to and/or over.
container - z-index 0
child (on top container) - z-index 1
child 2 (above all) - z-index 999
Of course this is all based on stupid IE but its worth a try in android also.
Second Try :)
I am not familiar with the android browser at all, but I hope to maybe lead you down a path to solve your issue. Superfish is a javascript menu that has implemented a solution for z-index menu items when they drop down over select boxes in browsers. BgIframe is the js that they use to achieve this. Your answer may lie there, hopefully.
http://users.tpg.com.au/j_birch/plugins/superfish/#sample2
Put the under html in a div and set the display:none using javascript, so then the under content is gone, instead of being clickable and modal.
if you want to solve this problem, first of all you must add z-index to parent wrapper and clearly add z-index to your other elements, solution is that all elements will have a zero point for anderstanding z-index property correctly
Related
I am creating a website at the moment where scrolling will be disabled on the entire website (it's made out of sections, all are as tall as screen height except for 1 section, because that one is too large..).
I've been looking around to see if any plug-ins exist for this yet, but haven't had any luck, yet.
Would anyone know a plug-in or how to do this?
It would help me a great deal.
if all of your site has the style overflow:hidden then you can target the one section by id or class and make it overflow-y:scroll
ps the link you posted is a 404 error
You can use css to disable or enable scroll for a containing element by setting the overflow property to none.
However, in your case, I guess there is no reason for a script, you can simply set the overflow property in the style of the offending element.
Here's the code:
http://jsfiddle.net/tqkr9vyz/2/
function setScroll(elementName, s) {
document.getElementsByName(elementName).style.overflow = s;
}
I am developing a mobile web app, and I'm a bit confuse with something :
I have one div called UpperDiv with a z-index of 50 and under that div, there is an other one, called UnderDiv with z-index 0.
The problem is, when I "tap" on UpperDiv, it activates the :active pseudo-class on an element (where I clicked) of my UnderDiv. What should I do to disable this ?
----------------------------- EDITED --------------------------------
It finally works !!!!
I forgot to mention that I'm using a transition to open/close my UpperDiv.
So when opening I'm using :
$('#myDiv').css('-webkit-transform', 'translate3d(200px, 0px, 0px)').bind('webkitTransitionEnd', function(){
$('.underDiv').css('pointer-events', 'none');
});
And when I close :
$('#myDiv').css('-webkit-transform', 'translate3d(0px, 0px, 0px)').bind('webkitTransitionEnd', function(){
$('.underDiv').css('pointer-events', 'auto');
});
It works fine for me, if it can help someone else...
If this is on Android, it will be similar to this question
Is there a workaround for the Android browser bug with CSS-Position and clickable areas?
It is a bug in Android browser (and only there) that comes around when you change the DOM of the page along with some z-index stacking. The layers below will be target for mouse clicks even if something is stacked on top of it.
There are some workarounds on the above question which might work for you.
I read about using an empty flash movie with z-index 20 between the two divs.
Here's another question, which might have the answer
Android Webkit: Absolutely positioned elements don't respect z-index
on the issue page at google there is a workaround by some developer.
https://code.google.com/p/android/issues/detail?id=6721#c26
The problem is: If you change the CSS of an HTML element (e.g. display), the Android browser does not keep track of the UI changes the same way it would do it, if the DOM was changed. The change and the UI active areas are not synchronised correctly by only changing CSS. They would be by changing DOM.
So if you display the hight z-index layer with changes in the CSS, do change the DOM of that layer accordingly. This includes some gibberish in some data- attributes.
Comment https://code.google.com/p/android/issues/detail?id=6721#c55 may have a solutions, too
my friend has designed my webpage for me, but has now gone on holiday and i only know the very basics. I want to reduce the width of my buttons on one of my pages.
I think this is the part of the coding (where it says (".betbutton) i need to change but just don't know how - hope somebody can help me - thanks
$(".betbutton").click(function(){
$("#numberofbets").html(this.attributes["nob"].value);
bet = this.attributes["bet"].value;
This is the problem with how it actually looks on my site and need the size to reduce so the buttons all shift to the left.
http://freebetoffersonline.com/bet-calc.php
Instead of giving you a fish I will teach you to fish.
First use Firefox and then install the Firebug extension. Restart Firefox.
Once you have restarted there should be a Firebug menu, open it.
Once Firebug is open click on the blue arrow icon and that will let you choose the element inspector.
Then use the element inspector to inspect the "button" elements.
Firebug has a "style" tab on the right, it will show you the styles, including the width from various CSS classes. It will also show you where the CSS style sheet is located.
Even nicer, you can CHANGE the styles including the width to test and see if the changes you think may work will actually do what you think they will.
When you look at the buttons with Chrome's Web Inspector you see that they have a dynamic width. The container, which has class name .bidlist has a fixed width of 880px. Change it to ~560px and you should be fine :-)
I'm not really sure which buttons you want to change the size of, so this answer will be rather generic.
You need to use CSS. Inside the HTML for your button put style="width:100px;" or whatever width you want. If there is already a style attribute in the button's HTML, just add the width:100px; to the style.
In style.css, line 797, there is the .bidlist width property. Reduce that to something like 580px and see them shrink :)
Your friend made the buttons 25% of the width of the bidlist container, so there would be 4 fitting in each row. If you reduce the parent container's width, they shrink, too. In the style.css file, the design of all the elements are implemented, including the container width. So that is the part you change, not somewhere in the HTML (markup).
I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;
The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.
It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.
In IE 6 select control(combo box) is displaying on top of menus. I checked some Javascript menus, mmmenu, but all are getting under select control. It's not fixable by assigning Z-Index. Is there any other solution.
This is a well-known bug with IE6 with trying to absolutely position divs on top of select controls.
There are workarounds involving iframe shims, but there is no good answer. The iframe shim answer is to place an iframe underneath whatever div you're trying to place above a select, with the iframe being the same size. Unfortunately, this is a huge pain in the ass.
I suggest using a javascript menu system which already uses iframe shims, such as YUI menus (and I assume jQuery).
Most of the major javascript libraries have easy to implement solutions to this problem. We use jQuery, and the bgiframe plugin is very easy-to-use and solves the problem.
Daniel is definitely right. This is an ugly issue.
However, there may be another solution. If you are using multi-tiered menus that pop open and closed, it is possible to write JavaScript code that literally hides the problematic SELECT elements when the popup is opened (style the element to have a visibility of hidden). Then when the menu closes you can unhide that same SELECT control.
Then you just have to write code that detects which SELECT objects get in the way of a particular menu before it opens. It's not trivial code, but it's definitely possible to write. Then I'd just wrap the entire chunk of code in a conditional that checks to see if the user is on IE as there's no need to run this on Firefox or Safari.
The problem is that SELECT are "windowed" elements in IE6, and their z-index is above all the other non-"windowed" components. If you absolutely must have something above a combox, you might want to put it inside another windowed compnent, such as an IFRAME, and set the component's z-index to be higher than that of the combobox.
I must admit, this isn't a pretty solution.