'Vuetify RadioGroup full width

i have a vuejs app which looks like this

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid>
        <v-radio-group v-for="i in list" :key="i">
          <v-layout row wrap>
            <v-flex md4>
              <v-radio label="Test 1" value="a"></v-radio>
            </v-flex>
            <v-flex md4>
              <v-radio label="Test 2" value="b"></v-radio>
            </v-flex>
            <v-flex md4>
              <v-radio label="Test 3" value="c"></v-radio>
            </v-flex>
          </v-layout>
        </v-radio-group>
      </v-container>
    </v-content>
  </v-app>
</div>

(https://codepen.io/anon/pen/NEErNz)

The Problem is that i want to have the radios in full with, but the css class v-input__control which is generated by vuetify blocks this. Do you have any ideas how i could fix this?

Wrong -> v-input__control -> width: auto
Correct -> v-input__control -> width: 100%

vue.jsvuejs2vuetify.js


Solution 1:[1]

Rithy awnser is almost right but it has 2 problems. The css code affects every control on app (and is not scoped) and v-input__contol class is not accesible by css or your css processor because is scoped inside de control group component. So:

Add a class to your radio group:

<v-radio-group class="radio-group-full-width" v-for="i in list" :key="i">

Then add the css styles (If you use SCSS, if not, see @JakesInTheSoup answer)

<style scoped lang="scss">
 .radio-group-full-width {
   >>>.v-input__control {
     width: 100%
   }
 }
</style>

The ">>>" is important because it allows the css to access the embeded component scope

Solution 2:[2]

@Nacho Moco's answer worked for me with a slight modification to the braces:

<style scoped>
 .radio-group-full-width >>>.v-input__control {
     width: 100%
 }
</style>

Solution 3:[3]

just apply style to overwrite existing class 

<style scoped>
     .v-input__control {
        width: 100% !important
      }
      .v-label {
        width: 100% !important
      }
</style>

Solution 4:[4]

@Nacho Moco's answer worked for me with a slight modification:

<style scoped> 
.radio-group-full-width >>> .v-input--radio-group__input {
    justify-content: space-between;
}
</style>

Solution 5:[5]

I achieved this with Traxo's comment. Here was my layout using Vuetify v1.5.11:

<v-radio-group v-model="selectedDate" class="radio-container d-flex">
  <v-radio
    class="radio-item"
    color="primary"
    v-for="item of items"
    :key="item.id"
    :value="item"
    :label="'This is an individual item!'"
  ></v-radio>
</v-radio-group>

And my CSS:

.radio-container {
  max-height: 60vh;
  overflow-y: scroll;
  .radio-item {
    border-bottom: 0.1rem #E5E5E5 solid;
    padding: 25px;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 JakesInTheSoup
Solution 3 Prak Tochmalen
Solution 4 Govind
Solution 5 Drew McDonald

Related Questions