How to horizontally align v-combobox with text inside v-col in vuetify

Stack Overflow Asked by alexyz78 on February 19, 2021

I’m trying to figure out how to horizontally align two v-col, one of this columns has a v-combobox:

<div id="app">
  <v-app>
    <v-container class="indigo lighten-5">
     <v-row no-gutters>
      <v-col cols="2">{{ o.id }} </v-col>
      <v-col cols="10">
        <v-combobox v-model="o.selected" :items="values" dense  class="ml-auto"></v-combobox>
      </v-col>
    </v-row>
    </v-container>
  </v-app>
</div>

Here there’s the codepen

How can I align those two columns?

vue.js vuejs2 vuetify.js

2 Answers

Add align prop to the row component with center as value :

<v-row no-gutters align="center">

Correct answer by Boussadjra Brahim on February 19, 2021

In order to do that, you can add class="d-flex align-center" to the v-row

<div id="app">
  <v-app>
    <v-container class="indigo lighten-5">
     <v-row no-gutters class="d-flex align-center">
      <v-col cols="2">{{ o.id }} </v-col>
      <v-col cols="10">
        <v-combobox v-model="o.selected" :items="values" dense  class="ml-auto"></v-combobox>
      </v-col>
    </v-row>
    </v-container>
  </v-app>
</div>

Here's the codepen

Answered by Felipe Endlich on February 19, 2021

Add your own answers!

Ask a Question

Get help from others!