Layout of Vuetify v-btn and v-input in a v-card-action area

Question

I need some help with aligning some v-btn's and a v-input. I'm trying to create a Record Navigation control and I need it to align in the horizontal middle. What I have is

And what I need is

My code is

          <v-card-action>  
              <v-layout row d-flex class="text-center">
                <div class="my-15 ml-15 text-center">                     
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('first')"
                  >First</v-btn>
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('previous')"
                  >Previous</v-btn>
                  <v-text-field width="10px" v-model="recordNav" class="centered-input"></v-text-field>

                  <v-btn class="ma-2" text round color="primary" @click="navChange('next')">Next</v-btn>
                  <v-btn class="ma-2" text round color="primary" @click="navChange('last')">Last</v-btn>
                </div>
                <div class="my-15"></div>                  
              </v-layout>                
            </v-card-action>

and have some codepen code at

https://codepen.io/morgenweck/pen/yLLdydN

I'm new to Vue and it seems that some standard HTML code does not work the same in a v-card-action area. All help is appreciated.

Answer 1

I have refined the layout to be more in line with your goal.

The primary issues were:

• typo in v-card-actions opening tag -- actions is plural
• to set the flex-direction of the buttons container to no-wrap (I substituted a v-row to use props for this)
• the round prop is deprecated on buttons so we need to use rounded now
• remove the text prop so that we can get the pill shape and background color of the buttons

I also set a defined width on the buttons so they are all the same size and added left, right padding on the button container.

I recommend viewing the snippet in full-screen so you don't see the console messages as prominently.

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    //
    recordNav: "Record: 1 of 15"
  })
  
})

.centered-input input {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.11/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.11/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-row align="center" justify="center">
      <v-card>
        <v-card-actions>  
          <v-row row d-flex nowrap align="center" justify="center" class="px-2">
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('first')"
            >First</v-btn>
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('previous')"
            >Previous</v-btn>
            <v-text-field width="10px" v-model="recordNav" class="centered-input"></v-text-field>

            <v-btn 
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('next')"
            >Next</v-btn>
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('last')"
            >Last</v-btn>
            
            <div class="my-15"></div>                  
          </v-row>                
        </v-card-actions>
      </v-card>
    </v-row>
  </v-app>
</div>

Answer 2

You could simply not wrap them in v-card-actions if it works that way.

If it still doesn't, try putting each component in a column and use the tag col="2" for the buttons and col="4" for the input field like this:

(And use v-row instead of v-layout)

<v-row class="text-center">
  <div class="my-15 ml-15 text-center">
    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('first')"
      >
        First
      </v-btn>
    </v-col>
    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('previous')"
      >
        Previous
      </v-btn>
    </v-col>
    <v-col cols="4">
      <v-text-field
        width="10px"
        v-model="recordNav"
        class="centered-input"
      ></v-text-field>
    </v-col>

    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('next')"
      >
        Next
      </v-btn>
    </v-col>

    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('last')"
      >
        Last
      </v-btn>
    </v-col>
  </div>
  <div class="my-15"></div>
</v-row>

You use the cols attribute to determine how much space an element should take up in a row. The maximum value is 12. So if you want two elements in a row next to each other, you give them the attributes cols="6", if you want 3 elements in a row then you give them cols="4" (since 12/3=4), etc. you get the idea.

On bigger screens (cols is for phones) you can align your elements differently. For instance you can place each of your elements in a new row if you give them the attribute cols="12" but if you want to have 2 elements in the same row on a tablet you use sm="6" on both elements. If you want your elements to have the same position no matter the screen size you can simply use cols on all of your col tags.

You can read further at https://vuetifyjs.com/en/components/grids