How do I switch the radio button to the left of the label?

#1

I don’t see any option on the radio button control to switch the button to the left of the label. I tried changing the markup but that didn’t work. Is there an easy way to do this?

#2

Hello @Vincent_Wansink :wave:

To change the position of the radio button, additional css is needed:

/* Mobiscroll theme */
.mbsc-mobiscroll .mbsc-radio {
  padding: 1em 1em 1em 3.125em;
}
.mbsc-mobiscroll .mbsc-radio-box {
  left: 1em;
  right: auto;
}
/* iOS theme */
.mbsc-ios.mbsc-form .mbsc-radio {
  padding: .875em 1em .875em 3.75em;
}
.mbsc-ios .mbsc-radio-box {
  left: 1.125em;
  right: auto;
}
/* Material theme */
.mbsc-material.mbsc-form .mbsc-radio {
  padding: .9375em 1em .9375em 3.5em;
}
.mbsc-material .mbsc-radio-box {
  left: 1em;
  right: auto;
}
#3

Thank you! That works perfectly, although it would be a nice feature if a future release of Mobiscroll included a setting for this. :+1:

1 Like