No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    modal gets resize when using col-X inside of it

    Help
    2
    3
    126
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      braga last edited by

      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

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by 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

        1 Reply Last reply Reply Quote 0
        • B
          braga last edited by

          That works fine thanks a bunch!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post