Good day,
There seems to be a bug in Mobiscroll's "number" component because no matter what I try I just can't make the width size I specify. I must use version 2.14.0 or greater because Custom Theme Builder doesn't work with older versions. I can resize width on older versions but I cannot use theme builder on older versions. So I am using Mobiscroll version 2.14.3 with my custom theme. Below is how I simply use default ios7 theme and width settings still don't work:
showPassengerPicker('#numAdults_rt', '#numChildren_rt', '#numInfants_rt');
function showPassengerPicker(var1, var2, var3)
{
$(var1).mobiscroll().number({
theme: 'ios7',
display: 'inline',
language: 'en',
mode: 'clickpick',
showLabel: false,
maxWidth: 40,
minWidth: 40,
fixedWidth: 40,
height: 20,
rows: 3,
wheels: [
[
{
label: '',
keys: [1, 2, 3, 4, 5],
values: ['1', '2', '3', '4', '5']
}
]
]
});
}
I am using all available settings in Mobiscroll's docs for setting width but none of them work.
And this is the HTML part:
<div align="center" style="margin-top:25px;">
<div id="numAdults_rt" class="numAdults_rt wheelPickerDiv"></div>
<div id="numChildren_rt" class="numChildren_rt wheelPickerDiv"></div>
<div id="numInfants_rt" class="numInfants_rt wheelPickerDiv"></div>
</div>
Please, could somebody let me know how I can reduce the width of number clickpick component so it would have reduced width? I need to reduce the width but none of the settings work. What am I doing wrong?
Thank you so much in advance, Victor.
I found the answer by luck. In mobiscroll.custom-2.14.3.min.css there is a min-width element. I set min-width:0 everywhere where it had non-zero pixel value. Now these controls don't have extra space on both sides.