javascript - Vuetify vertically center autocomplete in app bar? - Stack Overflow

admin管理员组

文章数量:1025244

If I add an v-autoplete 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-autoplete
        filled
      ></v-autoplete>
      <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 autoplete? I'm trying to add as little custom CSS as possible so I can easily update later.

It looks like this:

If I add an v-autoplete 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-autoplete
        filled
      ></v-autoplete>
      <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 autoplete? I'm trying to add as little custom CSS as possible so I can easily update later.

It looks like this:

• javascript
• css
• vuetify.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 23, 2020 at 18:34 himmiphimmip 1,85822 gold badges1717 silver badges3131 bronze badges 1

• Can you provide a link to the running application? – Andy Hoffman Commented May 23, 2020 at 18:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

This is because of details provided by this ponent. 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-autoplete. This will put ponent fit to app bar and if you want smaller input you can add dense to it. to bee 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-autoplete
        filled dense hide-details
      ></v-autoplete>
      <v-spacer />
      <v-btn to="/products" nuxt text>
        Centered button
      </v-btn>
    </v-app-bar>
  </v-app>
</div>

If I add an v-autoplete 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-autoplete
        filled
      ></v-autoplete>
      <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 autoplete? I'm trying to add as little custom CSS as possible so I can easily update later.

It looks like this:

If I add an v-autoplete 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-autoplete
        filled
      ></v-autoplete>
      <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 autoplete? I'm trying to add as little custom CSS as possible so I can easily update later.

It looks like this:

• javascript
• css
• vuetify.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 23, 2020 at 18:34 himmiphimmip 1,85822 gold badges1717 silver badges3131 bronze badges 1

• Can you provide a link to the running application? – Andy Hoffman Commented May 23, 2020 at 18:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

This is because of details provided by this ponent. 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-autoplete. This will put ponent fit to app bar and if you want smaller input you can add dense to it. to bee 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-autoplete
        filled dense hide-details
      ></v-autoplete>
      <v-spacer />
      <v-btn to="/products" nuxt text>
        Centered button
      </v-btn>
    </v-app-bar>
  </v-app>
</div>

本文标签： javascriptVuetify vertically center autocomplete in app barStack Overflow