Search code examples
cssvue.jsvuetify.jsv-slot

Vuetify adding style on v-slot:label

I have Vuetify code which look like this 

<v-radio-group v-model="gender" column class="radio-group-full-width">
  <v-radio value="Boy">
    <template v-slot:label>
      <v-textarea
        v-model="answer"
        v-validate="'required'"
        required
        :error-messages="
          errors.collect('form-create.answer')
        "
        label="Answer 1"
        data-vv-name="answer"
        type="text"
      ></v-textarea>
    </template>
  </v-radio>
</v-radio-group>

The Problem is that i want to have the text-area in full width, but the label tag which is generated by vuetify template slot blocks this. Do you have any ideas how i could fix this?

What it looks now

What i want

Solution

  • answer worked for me with a slight modification to the braces:

    .radio-full-width >>> label {
  width: 100%;
}