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 ?
    0_1510699734404_Screen Shot 2017-11-14 at 16.12.28.png



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

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.