MobiScroll Select Preset

Question

The mobiscroll documentation states

This preset enhances a regular HTML select to select the values with a scroller. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset.

The sample HTML code they provide uses inline styling to hide the original select element

<select name="City" id="select" style="display:none">

However, when I do this and setup the mobiscroll replacement to appear inline

$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});

I find that although the scroller appears I still end up with what looks like an input element above it. This does not happen in their demo code but there I note that what they do is something like this

<div id="select_cont" style="display: none;">
<select name="City" id="select">

but that simply hides everything including the mobiscroll replacement. Looking under the covers I found that calling

$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});

introduces a dummy input element into the DOM.

<input id='cities_dummy'...

I can get the dummy to hide itself by issuing a

$('#cities_dummy').css('display','none')

immediately after creating the scroller. However, I cannot understand why things are working differently in the demo code. I have noted that they are using jQuery Mobile v 1.1.1 whilst I am using the very latest version.

Perhaps this issue is related to versions? Or is there something else at play here? I'd much appreciate any help.

Answer 1

I figured it out. It is all down to the

inputClass:i-txt

bit in the scroller options settings. In the demo code they are probably playing with this class via script depending on the value of the display property in the options object. The point is this - in order to get the original select to disappear when the scroller display is set to "inline" you must define i-txt (or whatever input class you use) as

.i-txt{display:none}