Vuetify: [Bug Report] Wrong positioning of VTextField and VMenu in VToolbarItems

Created on 9 Sep 2019  路  5Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.15
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.132
OS: Mac OS 10.14.6

Steps to reproduce

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-toolbar flat="flat">
          <v-toolbar-title>Title</v-toolbar-title>
          <div class="flex-grow-1"></div>
          <v-toolbar-items>
            <v-text-field
              v-model="search"
              prepend-inner-icon="search"
              label="Search"
              hide-details="hide-details"
              single-line="single-line"
            >
            </v-text-field>
            <v-menu bottom="bottom" left="left">
              <template v-slot:activator="{ on }">
                <v-btn v-on="on" icon="icon"><v-icon>more_vert</v-icon></v-btn>
              </template>
              <v-list>
                <v-list-item @click="download()">
                  <v-list-item-icon>
                    <v-icon>file_download</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>
                    <v-list-item-content>Download</v-list-item-content>
                  </v-list-item-title>
                </v-list-item>
                <v-list-item @click="upload()">
                  <v-list-item-icon>
                    <v-icon>file_upload</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>
                    <v-list-item-content>Upload</v-list-item-content>
                  </v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-toolbar-items>
        </v-toolbar>
      </v-container>
    </v-content>
  </v-app>
</div>

Expected Behavior

VTextField and VMenu should be aligned correctly

Actual Behavior

Bildschirmfoto 2019-09-09 um 17 03 04

Reproduction Link

https://codepen.io/shinigami92/pen/NWKYopV?editors=1010

VToolbar bug

All 5 comments

@Shinigami92 you can create a Codepen account easily or log in with GitHub or Google.

You've submitted an issue that does not contain a reproduction. In order to effectively disposition this, we need to verify that the problem exists outside of your environment. This issue will be tagged as needs reproduction for the next 14 days before being closed.

You can find information on how to contribute to vuetify here.

Services to create a reproduction:

Thank you for your contribution and interest in improving Vuetify.

Thank you
Didn't know that I could sign in with GitHub 馃憤

https://codepen.io/shinigami92/pen/NWKYopV?editors=1010

Updated the codepen, VMenu isn't a cause of the problem:
https://codepen.io/sh7dm/pen/RwbMvLY

馃 ... mh so when I dont use VToolbarItems it is _working_ well ...
https://codepen.io/shinigami92/pen/ExYErdw?editors=1010

So is that really a bug? Or is there a lack of documentation?

Was this page helpful?
0 / 5 - 0 ratings