raido button and selectbox having multiple columns on Vuetify

@asya_aoi1049 on Tue Jan 08 2019
4.5 min


What is this?

default setting on Vuetify cloudn’t set multiple columns on raido button and selectbox because of CSS.
I show workaround that be able to display multiple columns.


Just set on css in style tag such as '<style lang="sass">'. I show the template, script and style at bellow.

<!-- radio button area start -->
<v-radio-group v-if="multiple" v-model="selected">
  v-radio :key="item" :label="item" :value="`${index + 1}`" v-for="(item, index) in choices">
<!-- radio button area end -->

<!-- selectbox area start -->
<div v-if="!multiple">
    v-for="(item, index) in choices"
<!-- selectbox area end -->
export default {
  data () {
    return {
      // If swhich radio and selectnox, change multiple to true or false.
      // When multiple is true, set selectbox else radio.
      multiple: false,
      selected: [],
      choices: [
        "choices 1", "choices2",
        "choices 3", "choices4"
<style lang="sass">
// radio
  left: 10px
  flex-wrap: nowrap
    position: static
    height: auto
    width: auto
    margin-bottom: 26px
    order: 1
    text-overflow: initial
    white-space: normal
    width: auto
    flex: 0 0 30px

// selectbox
  left: 10px
    position: static
    height: auto
    width: auto
    margin-top: -30px
    margin-left: 30px
    text-overflow: initial
    white-space: normal
    order: -1


When you want to change raido and selectbox style, fix css in style tag.