Vuetify v-text field minimum height limitation?

user_11505813 0
Viewed 14600

i have a v-text-field and i'm trying to set the height to 37px but it seems like the minimum height has to be 49px. Is there a way to override this? I tried putting custom css but it seems like it works in the chrome inspector but i am not able to target it somehow

I have made a codepen with custom css styling applied but cannot seem to make it work: https://codepen.io/anon/pen/MMEmex

 <div id="app">
  <v-app id="inspire">
   <v-container>
   <v-text-field solo placeholder="trying to adjust the height" 
   height="37px"></v-text-field>
   </v-container>
  </v-app>
  </div>

   new Vue({
 el: '#app'
    })

When i apply this css on .v-input-slot in the chrome inspector tools, it seem to work

  .v-input__slot {
  min-height: auto !important;
 display: flex !important;
 align-items: center !important;
 }

Thank you in advance guys.

vuejs2 vuetify.js css
5 Answers

use dense

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

Your css selector should be:

 .v-text-field .v-input__control .v-input__slot {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
  }

Demo on codepen

user_23036100

This is based on ittus's answer but it will also shrink the text-field label, icons and details accordingly.

.v-text-field .v-input__control .v-input__slot {
  min-height: 0 !important;
  padding: 0 8px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
}

.v-text-field .v-input__control .v-input__slot .v-input__append-inner {
  margin-top: 5px !important;
}

.v-text-field .v-input__control .v-input__slot label {
  margin-top: -12px !important;
}

.v-text-field .v-input__control .v-input__slot label.v-label--active {
  margin: 0 0 0 5px !important;
}

.v-text-field__details {
  margin: 2px !important;
}
user_145294540
  1. remove scoped attribute from <style> section
  2. set custom class on element, for example class="custom-class"
  3. set custom css style on any nested element , for example .custom-class .any-nested-element-class {min-height: 32px;}
user_43938520

Sub case v-app-bar in Vue 3:

I was trying to put a v-text-input in a v-app-bar for global search. Even with density=compact component is still 64px and does fit proper. The issue is this (quite complex) component has a normally hidden (but still rendered) details area underneath the input (presumably for validation feedback). If you disable that with hide-details prop and set density=compact it's 42px which fit nicely in v-app-bar and aligns vertically properly.

user_20383830
Related