Vuetify vertically center autocomplete in app bar?

user_2030026 0
Viewed 1558

If I add an v-autocomplete in v-app-bar it appears at the top of the app bar, everything else in there is centered.

    <v-app-bar app color="primary" dark>
      <v-icon class="mr-3">mdi-chart-line</v-icon>
      <v-toolbar-title>Centered title</v-toolbar-title>
      <v-autocomplete
        filled
      ></v-autocomplete>
      <v-spacer />
      <v-btn to="/products" nuxt text>
        Centered button
      </v-btn>
    </v-app-bar>

Is there some option I'm missing? Or some other element I should be wrapping around the autocomplete? I'm trying to add as little custom CSS as possible so I can easily update later.

It looks like this:

app bar input at top

vuetify.js css javascript
1 Answers

This is because of details provided by this component. such as error message or hints. So if you want these features you can increase height of app bar with height property.

and if you don't need them you can add hide-details to v-autocomplete. This will put component fit to app bar and if you want smaller input you can add dense to it. to become smaller or increase height of app bar.

So final code is:

<div id="app">
  <v-app id="inspire">
    <v-app-bar app color="primary" dark>
      <v-icon class="mr-3">mdi-chart-line</v-icon>
      <v-toolbar-title>Centered title</v-toolbar-title>
      <v-autocomplete
        filled dense hide-details
      ></v-autocomplete>
      <v-spacer />
      <v-btn to="/products" nuxt text>
        Centered button
      </v-btn>
    </v-app-bar>
  </v-app>
</div>
user_86101270
Related