0

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

enter image description here

Codiqa

enter image description here

jflay
  • 514
  • 9
  • 32

2 Answers2

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.

Max
  • 6,901
  • 7
  • 46
  • 61
  • Hmm, that didn't cut it. I have (options are created dynamically using js for loop) I am using PhoneGap as well, same issue here: http://stackoverflow.com/questions/14334357/why-does-size-property-doesnt-shows-up-multiple-options-like-a-list-box-on-a So maybe this is not really a Codiqa issue? – jflay May 23 '13 at 16:58
  • In that case it might not be a jQuery Mobile issue at all, could be a browser limitation on those devices. Might want to find a plugin that does this through Javascript. You could also just use a ListView! – Max May 23 '13 at 17:12
0

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

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • That's a good work around, but issue is I have 5 list boxes with potentially 5 options within each one. That is a bit popup overload ha – jflay May 23 '13 at 17:03
  • Take a look also at my other solution. You will also find a link about other methods of enhancement prevention with jQuery Mobile. – Gajotres May 23 '13 at 17:10