Is it possible to resize vuetify components?

vue.js vue-component vuetify.js
Ternence.Lin picture Ternence.Lin · Apr 5, 2018 · Viewed 35.9k times · Source

I recently use Vuetify to implement some UI designs. However, I found the default input component (such as v-text-field, v-select) are too large. I found that I can adjust the width of them, but for the height and font size, how can I change them?

Answer

David Tinker picture David Tinker · Jan 9, 2019

I have had some success using CSS transform to shrink everything:

.compact-form {
    transform: scale(0.875);
    transform-origin: left;
}

Just add that to your form. Its takes the font-size down to 14px (instead of 16) and shrinks the checkboxes and so on as well.

Related questions

Vuetify v-data-table align center only one column

i have: <v-data-table :headers="headers" :items="tableData" :items-per-page="5" class="elevation-1"> <template v-slot:item.id="{ item }"> {{item.id}} </template> How can I align the content of that column vertically center?

Read More
Vuetify: Show pagination controls at the top of my v-data-table as well as in the footer

The v-data-table has a top slot, with a pagination prop whose structure matches that of the footer slot. Is it possible to assign the top slot to reference the same (presumably a v-pagination) control that the footer is using? My …

Read More
Vue.js - How to properly watch for nested data

I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component …

Read More