CODEWITHSUNDEEP
vue.jsvuetify.js
Boidurja Talukdar
Boidurja Talukdar

Reputation: 696

v-text-field is not occupying the full width of the container

I am making a form in a dialog. I am trying to get a v-text-field occupy the full width of the container. But it is not occupying the full width.

I tried giving xs12 to lg12. I tried the directive full-width.

Here s my code:

<v-dialog v-model="dialog" max-width="878px">
     <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">
              <span id="two">
                <img id="plus" src="../assets/plus-symbol.svg">
                <span id="addapp">Add Application</span>
              </span>

            </v-btn>
          </template>
          <v-card style="border-radius:20px 20px 0 0;">
            <v-card-title>
              <span class="headline" id="frmttl">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>

              <v-container fluid grid-list-md>
                <v-layout row wrap style="margin-left:-600px; height: 314px; width:878px;">


                  <v-flex xs12 sm12 md12 lg12 xl12 >
                    <v-text-field v-model="editedItem.ApplicationName" single-line outline full-width placeholder="New Application Name"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>

            </v-card-text>

            <v-card-actions id="crdactns">
              <v-spacer></v-spacer>
              <v-btn id="closbtn" flat @click="close">Close</v-btn>

              <v-btn id="savebtn" flat @click="save">{{ CreateOrSave }}</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

I expect the v-text-box to occupy the full width of the dialog. But actually it is only occupying about half the space on the left side.

Upvotes: 0

Views: 2865

Answers (1)

dagalti
dagalti

Reputation: 1956

Codepen : https://codepen.io/anon/pen/dLoNeO

remove "margin-left:-600px; height: 314px; width:878px; lines. will work fine. checked and working

Upvotes: 1

Related Questions