Toolbar mis-position
-
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 ?
-
Please post code
Edit:
Please post your code, wrap it in three backticks ```
Toolbar should position itself like any other html element. if you want it sticky to the top of your layout us a q-layout.
-
<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>
