Search code examples
htmlcssmobiscroll

change width of number clickpick component of Mobiscroll


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.


Solution

  • 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.