Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Native select inside div with ui-header-fixed class does not work on Samsung Galaxy Tab SPH-P500 #5417

Closed
jkwuc89 opened this Issue · 8 comments

3 participants

@jkwuc89

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">
    <div class="ui-bar-a">
        <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">
            </select>
        </div>
        <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>
    </div>
</div>

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.

@jaspermdegroot
Collaborator

@jkwuc89

Please provide a test page. You can find the link to our JS Bin template here.

@jkwuc89

I will work on constructing a test page that demonstrates this issue. When it is available, I will post its link here.

@jkwuc89

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.

@jkwuc89

I updated the summary and the description based on my latest findings.

@jaspermdegroot
Collaborator

@jkwuc89

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.

@toddparker

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?

@jkwuc89

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.

@jkwuc89

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.

@jkwuc89 jkwuc89 closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.