Problem with scrolling when putting items in Tabs(div)



  • <template>
      <!-- root node required -->
      <q-layout>
        <div slot="header" class="toolbar teal" :padding="2">
          <q-search :model.sync="search" class="secondary"></q-search>
        </div>
    
        <q-tabs class="secondary" slot="navigation" :refs="$refs" default-tab="tab-1">
          <q-tab name="tab-1" icon="home" exact replace></q-tab>
          <q-tab name="tab-2" icon="whatshot" replace></q-tab>
          <q-tab name="tab-3" icon="question_answer" replace></q-tab>
          <q-tab name="tab-4" icon="notifications" replace></q-tab>
        </q-tabs>
    
    <div style="padding: 15px;">
      
      <div ref="tab-1">
      <!--this Kind of tabs it's not scrolling to the bottom if alot of contents are involved -->
        <div v-for="n in 5">
          <div class="timeline">
            <!-- label -->
            <div class="timeline-label">
              <h4 class="bg-white text-italic">
                Friday
              </h4>
            </div>
            <!-- item -->
            <div class="timeline-item">
              <div class="timeline-badge">
                <!-- badge with avatar -->
                <img src="~assets/images/bgg.png">
                <!-- ...or badge with icon -->
              </div>
              <button class="amber circular small">
                Buy
              </button>
              <!-- title -->
              <div class="timeline-title">
                Trip to mountains
              </div>
              <!-- date timestamp -->
              <div class="timeline-date text-italic">
                <div>17:01</div>
                <div>June 16th, 2016</div>
              </div>
              <!--
                content; any Web component or DOM elements,
                in this particular case, a Card
              -->
              <div class="card">
                <div class="card-title">
                  Card Title
                </div>
                <div class="card-content">
                  Lorem ipsum dolor sit amet...
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    
      <div ref="tab-2">
          <q-layout>
              <div>
                <div v-for="n in 50">Trending</div>
              </div>
          </q-layout>
      </div>
    
      <div ref="tab-3">
          <div class="list item-inset-delimiter no-border">
              <div class="item item-link" v-for="n in 4">
                  <div class="item-content inset">
                        Quasar Framework
                  </div>
              </div>
          </div>
      </div>
    
      <div ref="tab-4">
          <p class="caption">Striped</p>
          <div class="list striped">
              <div class="item" v-for="n in 6">
                  <div class="item-content">
                      List Item
                  </div>
              </div>
          </div>
      </div>
    </div>
    
    <q-drawer swipe-only backdrop-opacity="0.6">
      <div class="toolbar secondary">
        <q-toolbar-title :padding="1">
          Drawer
        </q-toolbar-title>
      </div>
      <div class="list no-border platform-delimiter">
        <q-collapsible icon="person_pin" label="Account">
          <q-drawer-link icon="person" to="/account">My Account</q-drawer-link>
          <q-drawer-link icon="public" to="/account">Contributions</q-drawer-link>
          <q-drawer-link icon="loyalty" to="/account">Trades</q-drawer-link>
          <q-drawer-link icon="account_balance_wallet" to="/account">Wallet</q-drawer-link>
        </q-collapsible>
        <q-drawer-link icon="build" to="/alarms">Settings</q-drawer-link>
        <q-drawer-link icon="help" to="/alarms">Help</q-drawer-link>
        <q-drawer-link class="absolute-bottom" icon="power_settings_new" to="/logout">Log Out</q-drawer-link>
      </div>
    </q-drawer>
    
    <q-fab class="absolute-bottom-right" @click="alert()" classNames="secondary" direction="up" style="right: 18px; bottom: 18px;">
      <q-small-fab class="white" @click.native="someMethod()">Buy</q-small-fab>
      <q-small-fab class="white" @click.native="someMethod()">Sell</q-small-fab>
    </q-fab>
    
    <div class="layout-padding">
    </div>
      </q-layout>
    </template>
    
    <script>
        export default {
          data () {
                return {}
          }
        }
    </script>
    
    <style>
    </style>

  • Admin

    First thing that caught my eye: :model.sync. Are you on Vue 1? If not, time to upgrade to Quasar v0.13 specs.