Forcing Codiqa To Honor Select Box Size Attribute

Question

I have also posted this question to Codiqa support some time ago, so I am not trying to turn stackoverflow into a Codiqa support center, just know alot of the guys supporting Codiqa are on here, but let me know if I am not allowed to be asking for support for a product on this site...

That aside, I have a select box with size="5" attribute that displays a max of 5 options that are populated via for loop with information from a database. The idea is for this select box to act as a listbox to show the user said information in the select box. However, Codiqa or maybe jquery mobile in general, converts any select box into a button that only can view the content when clicked on. This adds an extra and unnecessary step for my client in this instance. How can I force Codiqa or jquery mobile to honor my size attribute, so the user can see the populated information without having to click to view?

Thank you!

Chrome Browser

Codiqa

Answer 1

Creator of Codiqa here. This is jQuery Mobile behavior that you can disable by telling it to not enhance that form element:

<label for="foo">
<select name="foo" id="foo" size="5" data-role="none">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

We don't have a way to do this right inside of Codiqa yet, but it would be easy enough to add.

Answer 2

Working example: http://jsfiddle.net/bagz8/

You can programatically force select to open itself when page is available:

$(document).on('pagebeforeshow', '#index', function(){ 
    $( "#select-choice-4" ).selectmenu( "open" );
});

This would be a workaround.

EDIT :

Then force jQuery Mobile not to style select boxes. There are several solutions but this one is probably the best: http://jsfiddle.net/bagz8/1/

$(document).bind('mobileinit',function(){
    $.mobile.page.prototype.options.keepNative = "select";
});   

Warning, mobileinit event MUST be initialized before jQuery Mobile is loaded. You can see it in my example.

There are several other solutions of enhancement prevention and you can find theme here, just look for a chapter: Methods of markup enhancement prevention