Different sizes on wheels in mobiscroll

Question

I have made an custom wheel script in which I have 2 rows of wheels... In the first row I have 3 wheels and in the second I have 5 wheels.

I define the wheel size in my script but it is for all the wheels... Can I difference this some how so the 3 wheels together has the same width as the 5 bottom wheels?

Here is my script:

var a1 = {'0':'0',
          '1':'1',
          '2':'2+'};

var a2 = {'0':'0',
          '1':'1',
          '2':'2+'};

var a3 = {'0':'0',
          '1':'1',
          '2':'2+'};

var b1 = {'0':'0',
          '1':'1',
          '2':'2+'};

var b2 = {'0':'0',
          '1':'1',
          '2':'2+'};

var b3 = {'0':'0',
          '1':'1',
          '2':'2+'};

var b4 = {'0':'0',
          '1':'1',
          '2':'2+'};

var b5 = {'0':'0',
          '1':'1',
          '2':'2+'};

var wheel = [{},{},{},{},{},{},{},{}];

wheel[0]['choice1'] = a1;
wheel[0]['choice2'] = a2;
wheel[0]['choice3'] = a3;
wheel[1]['choice4'] = b1;
wheel[1]['choice5'] = b2;
wheel[1]['choice6'] = b3;
wheel[1]['choice7'] = b4;
wheel[1]['choice8'] = b5;

$('#mychoices').scroller({
    display: 'bottom',
    mode: 'scroller',
    wheels: wheel,
    theme: 'default',
    animate: 'fade',
    cancelText: 'Cancel',
    setText: 'OK',
    height: 40,
    width: 50,
}); 

What I want is to make row 1 90 in width and the 2nd row 50 in width.

Hoping for help and thanks in advance ;-)

Answer 1

You can do it with some extra css:

.dw .dwc {
    display: block;
}
.dw .dwc table {
    width: 100%;
}

But this way the two groups always will shown under each other, even if there is enough horizontal space. If needed, you can solve this with media queries.

Note 1: Your wheel variable is incorrect, should be var wheel = [{},{}]; . You have only 2 groups, 0 and 1.

Note 2: In mobiscroll 2.6 a new wheel format was introduced. This one also works, but it is considered deprecated.