Is it possible to resize vuetify components? - vue.js

Question

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 1

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.

Answer 2

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/vuetify#1.0.13/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/vuetify#1.0.13/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>

Answer 3

I believe that one should always use native vuetify way instead of just using same or stronger CSS selectors or even make some CSS transformations to change size of the whole element...
You can look up all variables in Vuetify docs (more can be found for every component):
https://vuetifyjs.com/en/api/vuetify/#sass-variables
Make sure to check how to enable possibilty to override the variables:
https://vuetifyjs.com/en/features/sass-variables/
For example you can change font-size of text field by overriding $input-font-size: 18px; variable

Answer 4

https://vuetifyjs.com/en/api/v-text-field/#props
add dense
<v-text-field dense></v-text-field>

Answer 5

You can just reference by name as follows.
In your template code:
<v-text-field
class = "inputField input-name p-3 styled-input"
label="username"
name="username"
type="text"
:state="nameState"
v-model="credentials.username"
:rules="rules.username"
color="#01579B"
box
required
/>
In your style code:
.input-name {
background-color: #ffffff;
margin-top: 10px;
}