CODEWITHSUNDEEP
vue.jsvuetify.js
Notbad
Notbad

Reputation: 6296

Centering checkbox in table column

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"}]
  })
})

Upvotes: 5

Views: 12790

Answers (5)

Simon Klimek
Simon Klimek

Reputation: 352

If you want to center VCheckboxBtn using Vuetify 3 use inline option. Component has reserved space for label by default
This solution works in custom headers with align: 'center' param in v-data-table.

 <v-checkbox-btn inline></v-checkbox-btn>

Upvotes: 0

alperk01
alperk01

Reputation: 343

hide-details prevent from showing error messages. If you do not use this prop, you cannot center in vertical.

<v-checkbox v-model="checked" hide-details/>

Upvotes: 0

2wndrhs
2wndrhs

Reputation: 91

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

Upvotes: 9

Max
Max

Reputation: 7100

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

Upvotes: 5

connexo
connexo

Reputation: 56773

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;
}

Upvotes: 2

Related Questions