CODEWITHSUNDEEP
vuetify.js
kevinmdunne
kevinmdunne

Reputation: 1

How to create a multi-line label for a v-checkbox

I am trying to create a multi-line label for a v-checkbox. The first line would be a title and the second line would be a sub-title. I tried using the label slot, but it keeps everything on the same line. My code is below. Any suggestions welcome, thanks.

    <v-checkbox>
    <template v-slot:label>
      <div class="primary--text">Imaging Orders</div><br/>
      <div>1 Imaging Order(s) Selected</div>
    </template>
    </v-checkbox>

Upvotes: 0

Views: 2111

Answers (2)

c0gent
c0gent

Reputation: 21

I found a better solution, instead of changing the display property, was to just change the flex direction (from the default of row) to column. I also ran into the items not being left aligned, so I added the declaration after flex-direction (you may find you need this too). I had to target the element more directly, but I did not need !important. I also needed to use a deep selector. Here is some documentation on that. For that, you would just need a class on your v-checkbox and that would be '.a' in the documentation's examples and the following selector would be '.b'.

<style scoped>
  .v-input--selection-controls .v-input__slot > .v-label {
    flex-direction: column;
    align-items: flex-start;
  }
</style>

Upvotes: 1

discolor
discolor

Reputation: 1396

That happens because the v-label inserted into the DOM is a display: inline-flex by default. You could overwrite this rule with some custom css if you really need to.

Caution: Heavily test if you don't accidentally cause other labels to act weird because of this. Really depends on if you have more labels in use or not. I'd be very careful with overwriting css just like that. 

<style scoped>
.v-label {
  display: block !important;
}
</style>

Upvotes: 1

Related Questions