CODEWITHSUNDEEP
cssvue.jsbootstrap-4vuetify.jsgrid-system
code-8
code-8

Reputation: 58790

List multiple inputs in a row

I wonder if there is a way to show inputs type-text col-md-6. I want them to list top to bottom like this.

enter image description here

Ex.

Right now, I had to create more row per input.

<v-row>
    <v-col cols="6">
        <v-text-field
            v-model="temperature"
            :rules="form.rules.url"
        ></v-text-field>
    </v-col>
</v-row>

<v-row>
    <v-col cols="6">
        <v-text-field
            v-model="temperature"
            :rules="form.rules.url"
        ></v-text-field>
    </v-col>
</v-row>

I was hoping I can do something like this, seems cleaner, but If I do that, it goes side by side. That's not what I wanted.

<v-row>
    <v-col cols="6">
        <v-text-field
            v-model="temperature"
            :rules="form.rules.url"
        ></v-text-field>
    </v-col>

    <v-col cols="6">
        <v-text-field
            v-model="temperature"
            :rules="form.rules.url"
        ></v-text-field>
    </v-col>


</v-row>

Upvotes: 0

Views: 458

Answers (1)

Nikesh Kp
Nikesh Kp

Reputation: 384

Add flex-column to <v-row>. This will solve your problem. If it is not solved please try to provide flex-direction: column; to the wrapping parent.

Upvotes: 1

Related Questions