You can clone with
HTTPS or Subversion.
Inside my PhoneGap / jQuery Mobile 1.2.0 application, I am using the following HTML to create a select menu inside a fixed position header:
<div id="header" data-role="header">
<a class="headerIcon" id="homeIcon" href=""><img class="icon-button" src="images/home-gold-up.png"></a>
<div data-role="fieldcontain" id="tasksMenuDiv">
<select id="tasksMenuSelect" translate="yes" data-native-menu="true" data-mini="true" data-theme="c">
<h1 id="homePage" translate="yes" class="ui-title">Translated Page Title Goes Here</h1>
<p id="onlineIndicator" style="color: white; font-weight: bold; font-size: 16px; position:absolute; top: 0px; right: 140px;"></p>
<a class="headerIcon" id="messagesIcon" href=""><img class="icon-button" src="images/messagesicon-white-up.png"></a>
<a class="headerIcon" id="toolboxIcon" href=""><img class="icon-button" src="images/toolboxicon-white-up.png"></a>
Using data-role="header" adds the following classes to the div: ui-header ui-bar-a slidedown ui-header-fixed
On the Motorola Xyboard running Android 4.0.4 / Browser 4.0.4-51, the native select menu inside this header displays properly when it is tapped. On the Samsung Galaxy Tab SPH-P500 running Android 4.0.4 / Browser 4.0.4-P500VPALI6, tapping on the select displays nothing.
When I change data-role="header" to class="ui-header ui-bar-a slidedown" which removes the ui-header-fixed class, tapping the select menu inside the header on the Samsung tablet works. The side effect of this of course is that the header at the top of the page no longer stays in position when I scroll the page.
Please note that I am unable to reproduce this behavior outside of my PhoneGap application so providing a test page will not be possible.
Please provide a test page. You can find the link to our JS Bin template here.
I will work on constructing a test page that demonstrates this issue. When it is available, I will post its link here.
My attempt to run the same page that demonstrates this issue outside of my PhoneGap app (i.e. directly from the Samsung 4.0.4 internet browser) does not reproduce this issue. So, it appears that running the page in question inside PhoneGap is contributing to this behavior.
I updated the summary and the description based on my latest findings.
Although you only see the issue inside PhoneGap you can still provide a test page so we can see the markup and test it on Android WebView for example to see if we can reproduce it there. The markup you pasted in the initial post isn't visible (at least, not to me) and we need to see the whole page.
Since select menus are really fragile in android, this may simply be that any div with fixed positioning will break the select. Mind first trying a simple page that doesn't even use jQuery Mobile but has a div with fixed positioning and a native select to see if that works?
Using data-role="none", I turned off all jquery mobile theming on the select. That select also failed to work when tapped upon. Based on other threads on this forum, it appears that selects within fixed position div's can be a problem on Android. What's weird is that this same select works just find on the Motorola Xyboard which is also running Android ICS. It appears that Samsung's customized / forked browser inside ICS is contributing to / causing this issue.
I also determined that on the Samsung Galaxy Tab SPH-P500, selects inside a div whose positioning is set to "absolute" also do not work when tapped upon. Based on my testing results, I am comfortable stating that this is an Android browser issue on the Samsung Galaxy Tab and not an issue with jQuery Mobile. Therefore, I am going to close this issue.