Long select list appears, scrolls page and disappears

[mrextreme]

On Android 2.3.4, stock browser, JQ 1.7.2 and JQM 1.1.1, SE xPeria Arc.

I have a "long" select list with native menu set to false, the months of the year from "January" to "December" as a form element. The list is long enough to not to fit the screen, you have to scroll. When I display the form, everything is ok, the long selects also work fine as they supposed to (other than that they never lose the "on focus" styling). If I don't fill in the form correctly, jQuery Validate will add extra elements to the page to show the errors, thus making the whole page longer. If I try to open the select menu now to fix my mistakes, most of the times it will quickly scroll the page a bit, open the select menu in a new blank page and immediatelly close it and scroll the page with the form back to where it was. But then if I scroll the page up and down, the menus will work again for that one time, and then they won't work any more until the next manual scrolling.

[mrextreme]

I successfully overcame that issue with a neat trick - however not pixel-perfect, and it is only tested on an XPeria Arc S at the moment and Linux desktop Firefox 14. Once "Issue #3577" is done, this will be an even easier trick to apply on select lists.

TWO (OR MORE) COLUMNS IN THE SELECT LIST!

/*
for a < select id="xxx"...> select menu a < ul id="xxx-menu" ...> list is generated
in my case it is called "add_cc_month" for ceditcard expiry month
*/

ul#add_cc_month-menu li
{
float: left;
width: 49.3%; /* it must be less than 50% because of the borders */
}

/* the first element is a placeholder; if you don't have placeholder there, just remove or comment out these two rules */

ul#add_cc_month-menu li[data-option-index="0"]
{
width: 100%;
border: none; /* makes the size difference less visible */
}

ul#add_cc_month-menu li[data-option-index="0"] a.ui-link-inherit
{
text-align: center;
}

The two columns next to each other are not exactly the same wide as the "header" (placeholder), I hope I will be able to fix that with some CSS magick.

[mrextreme]

A workaround for the width problem:

$( '#add_cc_month-button' ).live( 'click', function() {
    $( 'ul#add_cc_month-menu li[data-option-index="0"]' ).css( 'width', ( 2 + $( 'ul#add_cc_month-menu li[data-option-index="1"]' ).width() * 2 ) + 'px' );
});

[jaspermdegroot]

@mrextreme

About the width problem of your workaround. I think you can just solve that with negative margin:

ul#add_cc_month-menu li
{
float: left;
width: 50%;
margin: 0 -1px; /* negate the left and right border width */
}

[mrextreme]

@uGoMobi

It works! Thanks, I did not have enough time to find this neat CSS solution myself. And the two column list also looks good! In fact it looks good enough to be a built-in feature - imho.

[mrextreme]

http://i47.tinypic.com/34q4ab7.png

http://i45.tinypic.com/2rrmcs9.jpg

[jaspermdegroot]

@mrextreme - Can you provide a test page for the original issue. JS Bin template can be found here.

[mrextreme]

I will try to replicate it when I have some free time. If I can't do it in the next few days, then I won't be able to do it until early January, though.

[jaspermdegroot]

@mrextreme - Ok, no problem. I close the ticket for now and we re-open as soon as you posted a test page.