CODEWITHSUNDEEP
cssvue.jsvuetify.js
Lucien Chardon
Lucien Chardon

Reputation: 461

Vuetify, align button next to text field

I have a text field and on right of the text field a button is appended. My issue is that the button has a top margin and is not in line with the text field. As you can see in the following picture, the button is too low.

Example:

The button is not aligned with the text field

Question:

How can i align the button with the text field in a native way?

I tried applying class="mt-0" to the button but that did not change anything.

Code:

<v-row>
  <v-col md="6" offset-md="3">
    <v-text-field class="pt-5" placeholder="Strawberries" outlined clearable>
      <!-- <template slot="append">
        <v-icon>clear</v-icon>
      </template> -->
      <template slot="append-outer">
        <v-btn dark x-large color="pink"> SEARCH </v-btn>
      </template>
    </v-text-field>
  </v-col>
</v-row>

Thanks for your help!

Upvotes: 3

Views: 13769

Answers (3)

wobsoriano
wobsoriano

Reputation: 13434

Using d-flex is better than v-row as v-row removes spacing and other stuff.

<div class="d-flex">
    <v-text-field class="pt-5 mr-2" placeholder="Strawberries" outlined clearable></v-text-field>
    <v-btn dark x-large color="pink"> SEARCH </v-btn>
</div>

v-row

enter image description here

d-flex

enter image description here

Upvotes: 8

mducharm
mducharm

Reputation: 31

I had the same problem, but the only simple solution I could find was to add hide-details to the v-text-field. But unfortunately this removes the validation messaging if this is something you need.

Upvotes: 2

Mohammad Yousefi
Mohammad Yousefi

Reputation: 543

use this:

<v-row>
    <v-text-field class="pt-5" placeholder="Strawberries" outlined clearable></v-text-field>
    <v-btn dark x-large color="pink"> SEARCH </v-btn>
</v-row>

Upvotes: 6

Related Questions