Is there a way to let a modal takes automatically a size in such a way everything is visible without scroll bars



  • I have a modal with a series of select boxes.
    I would like to be able to automatically size the modal in such a way everything is visible without vertical scroll bar.
    Using flex box??



  • Set the content-css of your modal with auto width an height:

    <q-modal :content-css="{height: 'auto', width: 'auto'}">
    

    You can see in this jsfiddle differents sizes of a modal depending of items in content



  • Brilliant !
    Many thanks.



  • Sorry, but won’t work for me, I got an vertical scrollbar without anything else, so I have to set minWidth and minHeight:

    <q-modal v-model="$store.state.layout.login" @show="focusLogin"
      :content-css="{minWidth: '380px', minHeight: '330px'}">
      <!-- wont work: :content-css="{height: 'auto', width: 'auto'}">  -->
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn flat round dense v-close-overlay
            icon="keyboard_arrow_left"
            :title="$t('layout.goBack')" />
          <q-toolbar-title>{{ $t('layout.login.title') }}</q-toolbar-title>
        </q-toolbar>
        <div class="q-pa-md">
          <q-field class="q-pb-md"
            icon="email"
            :label="$t('layout.login.email')"
            orientation="vertical"
            :error="$v.loginData.email.$error"
            :error-label="$t('layout.login.emailError')"
            >
            <q-input v-model.trim="loginData.email"
              type="email"
              placeholder="demo@alinex.de"
              autofocus
              ref="loginEmail"
              @blur="$v.loginData.email.$touch"
              />
          </q-field>
          <q-field
            icon="vpn key"
            :label="$t('layout.login.password')"
            orientation="vertical"
            :error="$v.loginData.password.$error"
            :error-label="$t('layout.login.passwordError')"
            >
            <q-input v-model="loginData.password"
              type="password" clearable
              placeholder="demo123"
              @blur="$v.loginData.password.$touch"
              @keyup.enter="login"
              />
          </q-field>
          <div class="q-pt-md float-right">
            <q-btn color="primary" icon="lock"
              :label="$t('layout.login.submit')"
              @click="login" />
          </div>
        </div>
      </q-modal-layout>
    </q-modal>