modal gets resize when using col-X inside of it



  • 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.

    0_1550501017641_Screenshot_2019-02-18 Quasar App.png

    1_1550501017642_Screenshot_2019-02-18 Quasar App(1).png



  • 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



  • That works fine thanks a bunch!


Log in to reply