CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Ori.Lin
Ori.Lin

Reputation: 541

Is it possible to resize vuetify components?

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?

Upvotes: 25

Views: 51471

Answers (5)

Ondra
Ondra

Reputation: 1091

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

Upvotes: 4

David Tinker
David Tinker

Reputation: 9644

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.

Upvotes: 28

Balaji
Balaji

Reputation: 10977

https://vuetifyjs.com/en/api/v-text-field/#props

add dense

<v-text-field dense></v-text-field>

Upvotes: 2

Jorge Cardenas
Jorge Cardenas

Reputation: 59

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

Upvotes: 0

acdcjunior
acdcjunior

Reputation: 135802

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>

Upvotes: 5

Related Questions