vuetify.js v-select minimum height limitation?

Question

As you can see from below, I am trying to reduce the height of a v-select element, but it appears there's a limit to the minimum height I can set. i.e. after height = 40, further reducing the height doesn't seem to work anymore. Is there anyway to surround this limit so I can make this element smaller? I need this because I need to fit it into a relative small div. Thanks in advance -

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
<v-app>
  <v-layout row>
      <v-select
        label="height=80"
        outline
        height="80"
        :items="years">
      </v-select>
      <v-select
        label="height=60"
        outline
        height="60"
        :items="years">
      </v-select>
      <v-select
        label="height=40"
        outline
        height="40"
        :items="years">
        </v-select>
      <v-select
        label="height=20"
        outline
        height="20"
        :items="years">
      </v-select>
  </v-layout>
</v-app>
</div>

Solution

The min-height of v-select component is 56px which is defined by the following CSS rule :

     .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
       min-height:56px;
     }

let's override it for example by setting :

  .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
   min-height: auto!important;
  }

but the result it's not perfect and the content is not aligned properly, to fix that we gonna add the following properties to the above rule :

  display: flex!important;
  align-items: center!important

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
  <v-app>
    <v-layout row>
      <v-select label="height=80" outline height="80" :items="years">
      </v-select>
      <v-select label="height=60" outline height="60" :items="years">
      </v-select>
      <v-select label="height=40" outline height="40" :items="years">
      </v-select>
      <v-select label="height=20" outline height="20" :items="years">
      </v-select>
    </v-layout>
  </v-app>
</div>

Comments

[Boussadjra Brahim]

the min-height is 56px

[Psidom]

@BoussadjraBrahim it's good to know that. I need it to be shorter than 56px. Not sure if that's possible -

[Psidom]

Thanks for the answer. This looks promising. And pretty much what I am looking for, except the label and icon are misaligned. Do you know anyway to center align them vertically?

[Boussadjra Brahim]

you're welcome, *it's hard to achieve that since we have font-size bigger that doesn't fit properly but i'm working on in this pen

[Psidom]

I am trying something like .v-input__append-inner { margin-top: 0px; } to move the icon up, which doesn't seem to work.

[Boussadjra Brahim]

@Psidom i fixed that by adding some properties, i hope i could achieve that

[Psidom]

Perfect. Exactly what I am looking for. One more question though. When I apply these custom css in my component as scoped, will it affect all vuetify v-select element (application-wise)? or it will only affect this specific component.

[Psidom]

Hmm, it doesn't seem like these css style can be override locally for each component. But anyway, thanks for the excellent answer -