Side by side input with vuetify form

Question

It's possible to put one or more input control side by side with v-form?

tks

this is my code, i wanna to make the textedit side by side (2 in each line)

 <v-form ref="form" v-model="valid">
            <v-select
              :items="especialidades"
              v-model="especialidadeSelecionada"
              item-value="cdCartorioNatureza"
              item-text="nome"
              label="Especialidade"
              :rules="[v => !!v || 'Campo obrigatório']"
              @change="buscarServicos"
              placeholder="Selecione uma especialidade"
              required
            ></v-select>
            <v-select
              :items="servicos"
              v-model="servicoSelecionado"
              label="Servico"
              ref="servicos"
              :placeholder="placeholderServicos"
              item-value="value"
              item-text="nome"
              :rules="[v => !!v || 'Campo obrigatório']"
              required
            ></v-select>
            <v-select
              :items="formaCalculos"
              v-model="formaCalculoSelecionada"
              label="Forma de calculo"
              placeholder="Selecione a forma de calculo"
              item-value="cdDivisor"
              item-text="nmDivisor"
              :rules="[v => !!v || 'Campo obrigatório']"
              required
            ></v-select>
            <v-text-field
              v-model.number="quantidade"
              label="Quantidade"
              mask="###"
              required
              :rules="quantidadeRules"
            ></v-text-field>
            <v-text-field
              v-model.number="valorBase"
              label="Valor Base"
              mask="###.###,##"
              required
            ></v-text-field>
            <v-text-field
              v-model.number="protocolo"
              label="Protocolo"
            ></v-text-field>
            <v-btn color="error" @click.stop="limparForm">Limpar</v-btn>
            <v-btn color="info" @click.stop="verificarProtocolo" :disabled="!valid">
              Adicionar</v-btn>
          </v-form>

-== Here i need to input mor details because the stack don't let me save the question

Solution

Vuetify uses a 12 column layout. The way I usually accomplish what you are looking to do is by using the v-flex. To place two components side by side we need to break the 12 columns into equal parts (6 and 6).

From the Vuetify Docs with text fields added:

<v-container grid-list-md text-xs-center>
      <v-layout row wrap>
       <v-flex xs6>
        <v-text-field
          v-model="field1"
          label="Field 1"
        ></v-text-field>
       </v-flex>
       <v-flex xs6>
         <v-text-field
           v-model="field2"
           label="Field 2"
         ></v-text-field>
       </v-flex>
     </v-layout>
</v-container>

Then you can play with the padding and margins classes to get them looking the way you wish.

Comments

[Fabio Ebner]

how? I need to use a container inside v-form? or have some configuration in v-form?

[FINDarkside]

I assume you're not familiar with CSS?

[Niklesh Raut]

Share your working code which is not side by side and I will try to answer