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>
-
First thing that caught my eye:
:model.sync
. Are you on Vue 1? If not, time to upgrade to Quasar v0.13 specs.