'How to change v-text-field width in Vuetify?

I placed v-text-field component inside a toolbar however it takes almost all available space. How can I change the width of this text-field to take less space?

<v-toolbar
    dense
  >
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-text-field
      hide-details
      label="Filled"
      placeholder="Search"
      filled
      rounded
      dense
      single-line
      append-icon="mdi-magnify"
    ></v-text-field>
    <v-btn rounded>Button 1</v-btn>
    <v-btn icon>
      <v-icon></v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-toolbar>
cssvue.jsvuetify.js


Solution 1:[1]

You can do it by css in scoped style:

<style scoped>
/deep/ .v-text-field{
      width: 400px;
}
</style>

and for detailed information read Vuetify documentation.

Solution 2:[2]

Since the toolbar is display:flex you could use class="shrink"...

      <v-text-field 
            hide-details 
            label="Filled" 
            placeholder="Search" 
            filled 
            rounded 
            dense 
            single-line 
            append-icon="mdi-magnify" class="shrink">
      </v-text-field>

Demo: https://codeply.com/p/h3Y8u3nK7P

Solution 3:[3]

i think you can use width="...px" in your v-text-field tag so:

<v-text-field
    ...

    width="...px"
    
    ...     
 ></v-text-field>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sherzod
Solution 2 Zim
Solution 3 Nilufar Shahmoradi

Related Questions