Is it possible to resize vuetify components?
Although you can use :style bindings, to get what you want you'll have to resort to CSS.
You can use !important to "force in" your styles, but there are alternatives that can make it work without it. See demo below.
new Vue({
el: '#app'
});#styled-input {
height: 40px;
font-size: 20pt;
}
.styled-input label[for] {
height: 40px;
font-size: 20pt;
}<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet prefetch' href='https://unpkg.com/[email protected]/dist/vuetify.min.css'>
<script src='https://unpkg.com/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vuetify.min.js'></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row>
<v-flex>
<v-text-field name="input-1" label="Regular Input"></v-text-field>
<v-text-field name="input-1" label="Styled Input" id="styled-input" class="styled-input"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>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.