<template>
  <q-layout ref="layout" view="lHr lpr lFr"> 
    <div>

        <q-list highlight>
          <q-list-header>Geselecteerde kweker</q-list-header>
          <q-item @click="$refs.vendorModal.open()">
            <q-item-main>
              <q-item-tile label>
                {{vendorName}}
              </q-item-tile>
            </q-item-main>
            <q-item-side right icon="keyboard_arrow_right" />
          </q-item>
          <q-item-separator />
          <q-list-header>Geselecteerde artikel</q-list-header>
          <q-item @click="$refs.itemModal.open()">
            <q-item-main>
              <q-item-tile label>
                {{itemName}}
              </q-item-tile>
            </q-item-main>
            <q-item-side right icon="keyboard_arrow_right" />
          </q-item>
        </q-list>

        <q-list highlight>
          <div class="layout-padding">
            <q-input
              v-model="priceLine.extracomment"
              type="textarea"
              float-label="Extra opmerking"
              :max-height="10"
              :min-rows="2"
              class="full-width"
            />
          </div>
          <div class="layout-padding">
            <q-input
              v-model="priceLine.internalcomment"
              type="textarea"
              float-label="Interne opmerking"
              :max-height="10"
              :min-rows="2"
              class="full-width"
            />
          </div>
        </q-list>

        <br/>

        <div class="item two-lines">
          <div class="item-content" v-show="code1NameVisible">
              <q-list-header v-show="code1NameVisible">Gekozen {{code1NameLabel}}</q-list-header>
              <q-item @click="$refs.kenmerk1Modal.open()">
                <q-item-main>
                  <q-item-tile label>
                    {{value1.label}}
                  </q-item-tile>
                </q-item-main>
                <q-item-side v-show="code1NameVisible" right icon="keyboard_arrow_right" />
              </q-item>
          </div>
        </div>

        <div class="item two-lines">
          <div class="item-content" v-show="code2NameVisible">
              <q-list-header v-show="code2NameVisible">Gekozen {{code2NameLabel}}</q-list-header>
              <q-item @click="$refs.kenmerk2Modal.open()">
                <q-item-main>
                  <q-item-tile label>
                    {{value2.label}}
                  </q-item-tile>
                </q-item-main>
                <q-item-side v-show="code2NameVisible" right icon="keyboard_arrow_right" />
              </q-item>
          </div>
        </div>

        <q-modal ref="vendorModal" maximized>
          <q-modal-layout>
            <q-toolbar slot="header" class="header-color">
              <q-btn flat @click="$refs.vendorModal.close()">
                <q-icon name="keyboard_arrow_left" />Terug
              </q-btn>
              <q-toolbar-title>
                Selecteer kweker
              </q-toolbar-title>
            </q-toolbar>
            <q-toolbar slot="header" color="grey-2">
              <q-search v-model="searchQuery" placeholder="Zoeken" @keyup.enter.native="searchVendor()"></q-search>
            </q-toolbar>
            <div class="layout-padding">
              <q-list highlight>
                <!-- <q-item v-for="(vendor, index) in vendors" @click="setVendorNoByModal(vendor), $refs.vendorModal.close()"> -->
                <q-item v-for="(vendor, index) in vendors" @click="setVendorNoByModal(vendor)">
                  <q-item-main>
                    <q-item-tile label>
                      {{vendor.n}}
                    </q-item-tile>
                  </q-item-main>
                </q-item>
              </q-list>
            </div>
          </q-modal-layout>
        </q-modal>

        <q-modal ref="itemModal" maximized>
          <q-modal-layout>
            <q-toolbar slot="header" class="header-color">
              <q-btn flat @click="$refs.itemModal.close()">
                <q-icon name="keyboard_arrow_left" />Terug
              </q-btn>
              <q-toolbar-title>
                Selecteer artikel
              </q-toolbar-title>
            </q-toolbar>
            <q-toolbar slot="header" color="grey-2">
              <q-search v-model="searchQueryItems" placeholder="Zoeken" @keyup.enter.native="searchItem()"></q-search>
            </q-toolbar>
            <div class="layout-padding">
              <q-list highlight>
                <q-item v-for="(item, index) in items" @click="setItemNoByModal(item)">
                  <q-item-main>
                    <q-item-tile label>
                      {{item.n}}
                    </q-item-tile>
                  </q-item-main>
                </q-item>
              </q-list>
            </div>
          </q-modal-layout>
        </q-modal>

        <q-modal ref="kenmerk1Modal" maximized>
          <q-modal-layout>
            <q-toolbar slot="header" class="header-color">
              <q-btn flat @click="$refs.kenmerk1Modal.close()">
                <q-icon name="keyboard_arrow_left" />Terug
              </q-btn>
              <q-toolbar-title>
                Kenmerk {{code1NameLabel}}
              </q-toolbar-title>
            </q-toolbar>
            <div class="layout-padding">
                <multiselect v-show="code1NameLabel !== 'Nvt'"
                  v-model="value1"
                  :options="gradeCodes1AutocompleteObject"
                  :custom-label="codeWithDescription"
                  :close-on-select="true"
                  :allow-empty="false"
                  @select="updatePriceLine"
                  @input="updatePriceLine"
                  placeholder="Selecteer"
                  label="value1"
                  track-by="value"
                  selectedLabel="Geselecteerd"
                  selectLabel="ENTER om te selecteren"
                  deselectLabel="ENTER om te verwijderen">
                  <span slot="noResult">Oops! Geen resulaten gevonden.<br>Voer andere waardes in.</span>
                </multiselect>
            </div>
          </q-modal-layout>
        </q-modal>

        <q-modal ref="kenmerk2Modal" maximized>
          <q-modal-layout>
            <q-toolbar slot="header" class="header-color">
              <q-btn flat @click="$refs.kenmerk2Modal.close()">
                <q-icon name="keyboard_arrow_left" />Terug
              </q-btn>
              <q-toolbar-title>
                Kenmerk {{code2NameLabel}}
              </q-toolbar-title>
            </q-toolbar>
            <!-- <q-toolbar slot="header" color="grey-2"> -->
              <!-- <q-search v-model="searchQueryItems" placeholder="Zoeken" @keyup.enter.native="searchItem()"></q-search> -->
            <!-- </q-toolbar> -->
            <div class="layout-padding">
                <multiselect v-show="code2NameLabel !== 'Nvt'"
                  v-model="value2"
                  :options="gradeCodes2AutocompleteObject"
                  :custom-label="codeWithDescription"
                  :close-on-select="true"
                  :allow-empty="false"
                  @select="updatePriceLine"
                  @input="updatePriceLine"
                  placeholder="Selecteer"
                  label="label"
                  track-by="value"
                  value="value"
                  selectedLabel="Geselecteerd"
                  selectLabel="ENTER om te selecteren"
                  deselectLabel="ENTER om te verwijderen">
                  <span slot="noResult">Oops! Geen resulaten gevonden.<br>Voer andere waardes in.</span>
                </multiselect>
            </div>
          </q-modal-layout>
        </q-modal>


    </div>

  </q-layout>

</template>

Hi all,
I’m a newbie with Quasar.
I’m just trying a form with a Toolbar on it.
But sometimes the position of the Toolbar is NOT on top of the screen (see screenshot)

I running the app on iPhone 8 with iOS 11.1

Can someone help me out of this strange behaviour ?