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
    1. Home
    2. hyungju
    H
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 2
    • Best 0
    • Groups 0

    hyungju

    @hyungju

    0
    Reputation
    1
    Profile views
    2
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    hyungju Follow

    Latest posts made by hyungju

    • RE: q-header in q-layout glitches

      I think it glitches with all scrolls element

      posted in Help
      H
      hyungju
    • q-header in q-layout glitches
      <template>
      
        <q-layout view="lHh Lpr lFf" >
          <q-header  id="qh"  class="bg-primary">
            <div class="q-px-lg q-mb-md q-pt-sm" id="header"  style="display: flex; flex-direction: row; justify-content: space-between">
              <div class="text-h5 gmarket-sans-b">버거마스터</div>
              <q-btn size="0.7rem" color="white" text-color="primary">내 설문 보기</q-btn>
            </div>
          </q-header>
      
          <q-page-container>
            <router-view />
            <q-footer bordered class=" text-primary" style="background-color: #fafafa">
              <q-tabs
      
                indicator-color="transparent"
                active-color="black"
                style="color: #BEBEBE; "
                ripple="true"
                class=""
              >
      
                <q-route-tab name="mails" icon="home" to="/feed" />
                <q-route-tab name="alarms" icon="star" to="/home"/>
                <q-route-tab name="movies" icon="search" />
                <q-route-tab name="settings" icon="settings"/>
      
              </q-tabs>
            </q-footer>
          </q-page-container>
      
        </q-layout>
      </template>
      

      it’s my code.

      <template>
        <q-page class="flex dd">
          <q-list  dense separator>
            <q-infinite-scroll @load="onLoad" :offset="250" :debounce="10" >
      
              <q-item v-for="item in items"  v-bind:key="item.uuid">
                  <q-item-section class="card_section">
                    <p>
                      <strong>{{item.brand}}</strong>
                      {{item.name}}
                    </p>
                    <div class="card_container">
                        <q-img v-bind:src="item.image" class="img"  style="border-radius: 10px"/>
                        <div class="rating_container">
                            <q-rating
                              @input="point => click(item, point)"
                              v-model="item.rating"
                              size="2rem"
                              icon="star"
                              color="grey-4"
                              color-selected="yellow-5"
                              class="no-shadow"
                            />
                        </div>
                      </div>
      
                    <q-separator />
                  </q-item-section>
      
              </q-item>
              <template v-slot:loading>
                <div class="row justify-center q-my-md">
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
            </q-infinite-scroll>
          </q-list>
          <q-page-sticky position="bottom-right" :offset="[18, 18]">
            <q-btn fab icon="refresh" color="primary" @click="refresh()"/>
          </q-page-sticky>
        </q-page>
      </template>
      

      this will be rendered inside the template.

      the problem is, when I scroll the page, the header glithces.
      the header itself suddenly moves to top and shortly back to normal state.

      I upload a video i’ve recorded.

      https://drive.google.com/file/d/1WVpoS87y_rCTMt9ErdX0cghaQRs1nL-5/view?usp=sharing

      posted in Help
      H
      hyungju