[ios] Tabs sometimes get pushed beneath the header

[wishinghand]

The following markup is the only component in my index.vue. Whenever I tap on a quasar-tab, if the list is longer than the screen is tall (using an iPhone 6+), it pushes the <quasar-tabs> component up underneath the <quasar-toolbar-title>. The problem doesn't seem to manifest on the Android phone (Motorola Moto X/Android 5.1).

You can see the rest of our code at github.com/wishinghand/nth

<template>
  <!-- Tabs -->
  <quasar-tabs slot="navigation" class="inverted primary">
    <quasar-tab v-for="list in wordlists" :target='"#" + list.name'>
      {{ list.title }}
    </quasar-tab>
  </quasar-tabs>

  <!-- Targets -->
  <span v-for="list in wordlists" id="{{list.name}}">
    <ul>
      <li v-for="word in list.words">
        {{ word.word }}
      </li>
    </ul>
  </span>

</template>

<script>
export default {
  data () {
    return {
      // wordlists for each tab
      // name: use NATO-phonetic name as identifier for quasar-tabs and targets
      // title: title to use on tab
      wordlists: [{
        name: 'juliet',
        title: 'J',
        filename: 'jWords.json',
        words: ''
      }, {
        name: 'quebec',
        title: 'Q',
        filename: 'qWords.json',
        words: ''
      }, {
        name: 'noQuebec',
        title: 'Q no U',
        filename: 'qNoUWords.json',
        words: ''
      }, {
        name: 'xray',
        title: 'X',
        filename: 'xrayWords.json',
        words: ''
      }, {
        name: 'zebra',
        title: 'Z',
        filename: 'zebraWords.json',
        words: ''
      }, {
        name: 'twoLetter',
        title: '2 Letter',
        filename: 'twoLetterWords.json',
        words: ''
      }, {
        name: 'threeLetters',
        title: '3 Letter',
        filename: 'threeLetterWords.json',
        words: ''
      }, {
        name: 'noVowels',
        title: 'No Vowels',
        filename: 'noVowels.json',
        words: ''
      }]
    }
  },
  ready () {
    // load wordlist file for each tab
    for (var i = 0; i < this.wordlists.length; i++) {
      this.$set('wordlists[' + i + '].words', require('assets/' + this.wordlists[i].filename))
    }
  }
}
</script>

<style lang="scss">
  .quasar-tabs{
    // position: absolute;
    // width: 100%;
  }
</style>

[rstoenescu]

Will investigate.

[rstoenescu]

Do you mean that the Tabs seem to be part of the page so when you scroll the Tabs they get out of view? Did I understand correctly that you want Tabs to always be visible regardless of scroll?

If "yes", then you should style your UI differently. Place the Tabs in index.vue under the <quasar-layout> and don't forget to mention slot="navigation". Get your template from menu-bar component inside index.vue template under <quasar-layout>.

One small other comment. You'd also better use routes for your App/site rather than just one index route.

If I did not understand correctly the problem you are facing, can you make a screenshot? Sometimes an image is worth a thousand words. Thanks!

[rstoenescu]

Please reopen if I missed something. Thanks!

[wishinghand]

Ignore the "butts" thing in the header, that was me testing if changes were being made. You can see that the header and menu bar look fine on one (q no u), but the other two the menu-bar sinks up under the header, sometimes fully, sometimes partially.

[rstoenescu]

Did you place <quasar-tabs> directly under <quasar-layout> in index.vue ? If not, then you are just using Tabs as part of your page, and when page scrolls up it scroll with Tabs too.

If you want your Tabs as part of the Layout, which is always visible on your screen then everything in menu-bar.vue should be written in index.vue where you keep your layout and NOT under the <div class="layout-view">.

[rstoenescu]

Will make a PR for your project ;)

[wishinghand]

This is my markup for the index.vue:

<template>
  <quasar-layout>
    <div slot="header" class="toolbar">
      <quasar-toolbar-title :padding="1">
        Nth
      </quasar-toolbar-title>
    </div>

    <div class="layout-view">
      <wordlists></wordlists>
    </div>
  </quasar-layout>
</template>

<script>
import wordlists from './wordlists.vue'

export default {
  data () {
    return {}
  },
  components: {
    wordlists
  }
}
</script>

[wishinghand]

The tabs scrolling out of view is fine, it's on intial rendering that they get pushed out of view, and they stay that way. I can't seem to pull them back down fully into view, making the tab options difficult to access. This only happens on lists that are longer than the viewport.

[rstoenescu]

Ah, I understand what you mean now. Will look into it.

[wishinghand]

Great, thanks! Loving the project so far.

[rstoenescu]

Not Quasar's fault. Referencing https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios#position-drift

Will think of a workaround.

[rstoenescu]

Finally found a workaround. Available in next Q v0.13.2 and edge version.