3. Problem with scrolling when putting items in Tabs(div)

Problem with scrolling when putting items in Tabs(div)

  • D
     

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

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

    0