select box under fixed footer navbar menu item reacts on click (Android)
Hi everyone!
I found strange problem on Android devices (detected on 2.3.3) which not occurs on webpage (tested with Ripple). JQuery is version 1.8.2 and JQM is version 1.2.0.
I have selectboxes with native options:
- $.mobile.selectmenu.prototype.options.nativeMenu = true;
and if the page is longer like screen and they occur under fixed footer menu and user clicks as shown on figure, navbar item doesn't reacts, but selectbox expands options.
I have also tried these functions in menu item onclick function:
- event.stopPropagation
- event.stopImmediatePropagation
but it doesn't work because in the case overlaping elements, onclick function of footer menu element is not executed.
Here is sample of code:
<div data-role="content">
-
<form id="profileForm">
- <label for="sex">Pohlavie:</label>
- <select name="sex" id="sex" data-theme="a" onchange="check_profile_form()">
- <option value="0" placeholder></option>
- <option value="1">žena</option>
- <option value="2">muž</option>
- </select>
- </form>
- </div>
- <div data-role="footer" data-position="fixed" data-toggle="false">
- <div data-role="navbar" data-theme="c">
- <ul>
- <li><a href="#" data-theme="c">
- <img src="img/ikony_05.png" class="footer_image"/>
- </a></li>
- <li><a href="#" data-theme="c">
- <img src="img/ikony_06.png" class="footer_image"/>
- </a></li>
- <li><a href="#" data-theme="c" class="ui-btn-active ui-state-persist"> <img src="img/ikony_07.png" class="footer_image"/>
- </a></li>
- <li><a href="#" data-theme="c">
- <img src="img/ikony_08.png" class="footer_image"/>
- </a></li>
- </ul>
- </div>
- </div>
Every advice will be very appreciated.