Vuetify RadioGroup полной ширины

Question

У меня есть приложение vuejs, которое выглядит следующим образом

<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)

Проблема в том, что я хочу, чтобы радио было полностью, но класс css v-input__control, который генерируется vuetify, блокирует это. У вас есть какие-либо идеи, как я мог это исправить?

Неправильно -> v-input__control -> width: auto
Правильно -> v-input__control -> ширина: 100%

Answer 1

Я добился этого с комментарием Traxo .Вот мой макет с использованием 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>

И мой CSS:

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

Answer 2

Rithy awnser почти прав, но у него есть 2 проблемы.Код css влияет на все элементы управления в приложении (и не ограничен областью действия), а класс v-input__contol недоступен для css или вашего процессора css, поскольку он находится внутри компонента группы управления.Итак:

Добавьте класс в свою радиогруппу:

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

Затем добавьте стили CSS (если вы используете SCSS, если нет, см. Ответ @JakesInTheSoup)

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

">>>" важно, потому что позволяет css получить доступ к встроенной области компонента

Answer 3

@ Ответ Начо Моко помог мне с небольшой модификацией скобок:

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

Answer 4

просто применить стиль, чтобы перезаписать существующий класс

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