No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Problem with scrolling when putting items in Tabs(div)

    Help
    2
    2
    1336
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dongun last edited by dongun

      <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>
      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by rstoenescu

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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post