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.


Log in to reply
 

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