Search jQuery

jQuery Forum

JQM Android 2.2 select box z-index footer problem

in jQuery Mobile • 1 year ago

We have the latest JQM, Jquery. We have a settings page with 6 select boxes on and a fixed footer with 4 <a> buttons.

If you scroll so that 1 of the select boxes is underneath the footer and then select a button, instead of the default behavior of going to the href contained within the footer button, our Galaxy Tab and Galaxy S2 (Android 2.2) open the native select box options. This is not happening in Chrome on the desktop or any apple device.

I have a good go at messing with the z-index of the footer etc but nothing is working.

Any help gratefully received.

Replies(10)

mspisars

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Have you read the "Knows Issues" section for jQm Fixed Toolbars http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html

Are you using absolute position on any of the form elements?

harvo1

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Hi,

Thanks for the replay, I have seen this issue but ours is the opposite i.e. clicking the footer button doesn't work and somehow the click 'goes through' to the element below (the select boxes) opening up the select box options. See the code below for a test example. This is only happening in Android 2.2.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no,minimum-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
            <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

            <style type="text/css">
            .ui-navbar    
            {
            z-index: 1000;
            }
            </style>
            </head>
            <body>
            <div id="page1" data-role="page">
            <div data-role="header" data-position="fixed"><br />Header<br /></div>
            <div data-role="content">
            <ul data-role="listview">
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            <li><select><option value="test1">test1</option><option value="test2">test2</option></select></li>
            </ul>
            </div>
            <div data-role="footer" data-position="fixed" style="position:fixed;z-index: 1000;">
            <div data-role="navbar" class="main-menu-nav" data-grid="c">
            <ul>
            <li><a href="#page2" style="height:60px; position:relative;">Link 1</a></li>
            <li><a href="#page2" style="height:60px; position:relative;">Link 1</a></li>
            <li><a href="#page2" style="height:60px; position:relative;">Link 1</a></li>
            <li><a href="#page2" style="height:60px; position:relative;">Link 1</a></li>
            </ul>
            </div>
            </div>
            </div>
            <div id="page2" data-role="page">
            <div data-role="header" data-position="fixed"><br />Header<br /></div>
            <div data-role="content">This is page 2</div>
            <div data-role="footer" data-position="fixed">
            <div data-role="navbar" class="main-menu-nav" data-grid="c">
            <ul>
            <li><a href="#page1" style="height:60px;">Link 1</a></li>
            <li><a href="#page1" style="height:60px;">Link 1</a></li>
            <li><a href="#page1" style="height:60px;">Link 1</a></li>
            <li><a href="#page1" style="height:60px;">Link 1</a></li>
            </ul>
            </div>
            </div>
            </div>
            </body>
            </html>

alvincasco

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Normally html5 doctype declaration <!DOCTYPE html>

but the pasted code above is missing the < infront of your declaration, could it be as simple as that?

harvo1

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Hi,

thanks for that, no, that was just a typo.

emkmail2

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Harvo,

Did you discover a fix to your problem? I am having the same issue for a non-JQM project.

My fixed header has a button within it. If a select menu is beneath the button it clicks through to the select instead of the button. Z-index does not help.

Thanks.

harvo1

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Hi,

As we were using a Galaxy Tab, we moved the select boxes so they were not selectable under the footer. Not a fix but s solution. Is your's a non-JQM issue?, Is it normal HTML?

emkmail2

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Thanks for your reply harvo1. Glad you were able to work around the issue.

Yes, I am not using JQuery mobile on my project -- I stumbled on this message thread through a Google Search and our problem seemed similar. After skimming for a solution yesterday, it sounds like Android 2.2-2.3 has weird behaviors with fixed elements - particularly with form elements.

I have not found a workaround yet, but hope to find something. The site I am working on is very form heavy for the mobile and tablet experience, so I need to find some way to prevent the fixed header from clicking through to the form elements beneath it.

Take care!

harvo1

Re: JQM Android 2.2 select box z-index footer problem

1 year ago

Well to anyone else finding this, it's probably not JQM's fault as it's happening in JQM and non JQM projects. It's a property of Andriod 2.2 that's causing the issue.

Thanks for the insight.