CODEWITHSUNDEEP
cssflexboxvuetify.js
David J.
David J.

Reputation: 1913

getting flexbox (via Vuetify) to align column content to the right

I'm trying to create list items in Vuetify consisting of v-rows containing 3 v-col, where the third column contains a checkbox. Here's my current code for the list items:

   <v-list-item v-for="(item, index) in data" :key="item.value"  class="ma-0 pa-0">
      <div class="ma-0 pa-0 pr-2 pl-2">
        <v-row class="d-flex" style="flex-direction:row" fill-height>
          <v-col class="handle d-flex align-center" cols="12" md="2">
            <v-icon>mdi-drag</v-icon>
          </v-col>
          <v-col class="d-flex  align-center"   cols="12" md="8">{{ item.text }}
          </v-col>
          <v-col class="d-flex align-right" cols="12" md="2">
              <v-checkbox  class="d-flex" @change="handleToggle(index)" :input-value="item.show">
              </v-checkbox>
          </v-col>
        </v-row>
      </div>

And this ends up looking like:

enter image description here

How can I get the checkbox to align to the right, so they are vertically aligned?

Upvotes: 0

Views: 573

Answers (1)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

Add d-flex class to the div that is wrapping the <v-row> and add width: 100% to the style. Then, add specific width to the parent of v-list-item so it won't fill up the page.

<v-list style="width: 400px;">  <!-- Add specific width to the parent -->

  <v-list-item ... >
     <div class="... d-flex" style="width: 100%">  <!-- Add d-flex and width: 100% here -->
       <v-row ... >
         <v-col ... >...</v-col>
         <v-col ... >...</v-col>
         <v-col ... >...</v-col>
       </v-row>
     </div>
  </v-list-tem>

</v-list>

enter image description here

Here's a demo.

Upvotes: 1

Related Questions