modal gets resize when using col-X inside of it

[braga]

Every time I add a new rep input the modal is resized. How can I prevent that from happening?

<q-modal minimized v-model="opened">
  ¦ ¦ <div class='q-pa-lg'>
  ¦ ¦ ¦ <q-input stack-label="Exercise" color="dark" v-model="terms" placeholder="Choose an exercise">
  ¦ ¦ ¦ ¦ <q-autocomplete
  ¦ ¦ ¦ ¦ ¦ @search="search"
  ¦ ¦ ¦ ¦ ¦ @selected="selected"
  ¦ ¦ ¦ ¦ />
  ¦ ¦ ¦ </q-input>

  ¦ ¦ ¦ <q-input color="dark" type="number" v-model="obj.sets" />

  ¦ ¦ ¦ <div class="row">
  ¦ ¦ ¦ ¦ <div class="col-4" v-for="index in obj.sets">
  ¦ ¦ ¦ ¦ ¦ <q-input class="q-ml-sm" stack-label="rep" color="dark" type="number" v-model="obj.reps" />
  ¦ ¦ ¦ ¦ </div>
  ¦ ¦ ¦ </div>

  ¦ ¦ ¦ <q-datetime stack-label="Day" color="dark" v-model="obj.exercise_done_date" type="date" />

  ¦ ¦ ¦ <q-datetime stack-label="Duration" color="dark" v-model="obj.duration" type="time" />

  ¦ ¦ ¦ <br />

  ¦ ¦ ¦ <div class="row justify-between">
  ¦ ¦ ¦ ¦ <q-btn
  ¦ ¦ ¦ ¦ ¦ :disabled="!isEdit"
  ¦ ¦ ¦ ¦ ¦ color="negative"
  ¦ ¦ ¦ ¦ ¦ @click="remove"
  ¦ ¦ ¦ ¦ ¦ label="Delete"
  ¦ ¦ ¦ ¦ />

  ¦ ¦ ¦ ¦ <q-btn
  ¦ ¦ ¦ ¦ ¦ color="positive"
  ¦ ¦ ¦ ¦ ¦ @click="confirm"
  ¦ ¦ ¦ ¦ ¦ label="Confirm"
  ¦ ¦ ¦ ¦ />
  ¦ ¦ ¦ </div>
  ¦ ¦ </div>
  ¦ </q-modal>

The first image shows the “default” size of the modal and the second what happens when I add another input.

[s.molinari]

I believe your q-modal has no max-width, so it spreads out. Try setting that.

If that doesn’t work, try making a jsfiddle and we can work on the code together.

Scott

[braga]

That works fine thanks a bunch!