Vuetifyjs solo text field styling by reducing the height doesnt work

Question

I have added a solo text field in vuetify js and centered it in my toolbar but i want to reduce the height of the text field so that its neatly arranged on the toolbar

So i have

    <v-toolbar dense flat dark color="primary">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Title</v-toolbar-title>
        <v-text-field
                class="minimize-height"
                hide-details
                light
                solo
                      height="20px"
                placeholder="Search an item here"
        ></v-text-field>

        <v-spacer></v-spacer>

        <v-divider inset
                   vertical
        ></v-divider>

        <v-btn text class="text-none">
            Action Menu
        </v-btn>

    </v-toolbar>

This produces

How can i controll text field height since even by adding a height value doesnt work.

I have also tried adding a css by adding a class like

.minimize-height{
    height:10px!important //this still doesnt work
 }

I have also included this codepen which shows the full code

Answer 1

The following code snippet worked for me -

 <v-app-bar color="black" dark app clipped-left>
      <v-toolbar-title>Decrypt</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-text-field solo dense hide-details label="Search" prepend-inner-icon="mdi-magnify"></v-text-field>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-app-bar>

Answer 2

This is what couses your trouble:

You can override it to fit-content like this:

Remember to give higher CSS specifity to make it work. Plus don't override Vuetify's default classes globaly.

Answer 3

You can scale down the input slot since it doesn't go below a certain minimum height:

.v-input__slot {
 transform : scale(.65)
}

codepen