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

[paul]

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??

[chbarr]

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

[paul]

Brilliant !
Many thanks.

[Alinex]

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>