Search code examples
cssvue.jsvuetifyjs3

v-checkbox is excessively big / different row size compared to v-radio

I'm building an app in Vuejs 3 w/ Vuetifyjs 3 and I'm running into the problem where the density="compact" row size between a v-checkbox and v-radio has a huge difference. Look at the image below, it is from two different v-cards, using v-lists. All the code is exactly the same, with the only difference that one uses v-radio and the other v-checkbox. How can I make force the v-checkbox to have the exact same lineheight as the v-radio? CSS hacks are acceptable.

enter image description here

I read in another post that I should wrap them in a v-layout but that has no effect.

Radio button code:

  <v-card>
    <v-card-title>
      CARD TITLE GOES HERE
    </v-card-title>
    <v-list density="compact">
      <v-list-item>
        <v-sheet>
          <v-row>
            <v-col cols="2">
              <v-layout>
                <v-radio density="compact" dense inline></v-radio>
              </v-layout>
            </v-col>
            <v-col cols="6">
              {{ model.productName }
            </v-col>
            <v-col cols="4" class="center-content text-h7 text-red font-weight-bold">
              € {{ model.price }}
            </v-col>
          </v-row>
        </v-sheet>
      </v-list-item> 
    </v-list>
  </v-card>

Checkbox code:

  <v-card>
    <v-list density="compact">
      <v-list-item>
        <v-sheet>          
          <v-row>
            <v-col cols="2">
              <v-layout>
                <v-checkbox-btn density="compact" hide-details="true" inline></v-checkbox-btn>
              </v-layout>
            </v-col>

            <v-col cols="6">
              {{ model.productName }}
            </v-col>

            <v-col cols="4" class="center-content text-h7 text-red font-weight-bold">
              € {{ model.price }}
            </v-col>
          </v-row> 
        </v-sheet>
      </v-list-item>
    </v-list>
  </v-card>
Solution

  • Uh, I have struggled with that too.

    You can try <v-checkbox hide-details/>. A lot of the space is taken up by the message area from v-input, and setting the hide-details attribute will hide the area when there are no messages. Checkboxes will not align with inputs anymore though.

    If that is not enough, you can unset the min-height from the element. This will align with v-radio (If you change css in scoped styles, you need to use the deep selector to target nested elements):

    <style scoped>
.container-class :deep(.v-checkbox .v-selection-control) {
  min-height: unset;
}
</style>

    Here is an overview (the red bars are message areas):

    enter image description here