Centering checkbox in table column

user_574633 0
Viewed 9831

I'm trying to center checkboxes in a table column without success. The checkboxes always appear left aligned whatever alignment I use. The weird things is that same code works if I change v-checkbox for v-btn. Is there any solution to this problem?

https://codepen.io/anon/pen/QVqqVP

Here the simple view code:

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-data-table :items="apps" :headers="headers" hide-actions class="elevation-1">
            <template slot="items" slot-scope="props">
                <td class="text-xs-left">
                    <h6 class="mb-0">{{props.item.app_name}}</h6>
                </td>
                <td class="text-xs-center">
                    <v-checkbox color="primary"/> 
                </td>
            </template>
            </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>

Here the Vue app:

new Vue({
  el: '#app',
  data: () => ({
    apps: [{'app_name':"row1"}, {'app_name':"row2"}]
  })
})
vuetify.js vue.js
3 Answers

I found a solution for Vue 2.6.10

<td class="text-xs-center">
    <v-checkbox :input-value="props.item.closed" readonly hide-details class="align-center justify-center"></v-checkbox>
</td>

Adding

class="align-center justify-center"

On checkbox do the trick

user_18911330

Of course it cannot be centered on the td given the HTML structure you have:

enter image description here

The actual checkbox is hidden deep inside many nested div elements. Each of these has display: block; by default which means it grabs all horizontals space its parent element allows it to get.

On top of that, the element you're using is display using flexbox.

You can center your checkboxes adding the following CSS code:

.v-input__slot {
  align-items: center;
  justify-content: center;
}
user_37443040

I found a solution for Vuetify 2.4.0

<td class="text-center">
  <v-checkbox class="d-inline-flex"></v-checkbox>
</td>

Adding

class="d-inline-flex"

on v-checkbox component

user_166779260
Related