'q-pull-to-refresh' messing up footer



  • I have a very basic Vue component and I’m wrapping the content of the component with <q-pull-to-refresh>.

    The refresh works, but if I have a substantial amount of wrapped content, the footer ends up in the middle of the page.

    My layout is as follows:

    <template>
      <q-pull-to-refresh :handler="refresher">
        <div>
            ...content...
        </div>
      </q-pull-to-refresh>
    </template>
    

    0_1510967671967_Screenshot from 2017-11-17 18-09-47.png

    Is there any way to avoid this?

    Thanks :-)



  • From your code I can’t tell how you have your q-layout setup. Please post that.



  • Thanks for your response.

    I’m using the layout created with the ‘quasar new layout’ command, and rendering the above mentioned component within it:

    <q-layout ref="layout">
        <q-toolbar slot="header">...</q-toolbar>
    
        <div slot="right">
            <q-list>...</q-list>
        </div>
    
        <!-- Render Component -->
        <router-view />
    
        <q-toolbar slot="footer"></q-toolbar>
    </q-layout>
    

    This issue is only present when I have a lot of content in the pull-to-refresh component.
    If I take out a few of those paragraphs, the footer is at the bottom as expected.

    Thanks for you help :-)



  • Do you get any errors in console?

    Could you also post the complete code of the rendered component?



  • I just tried the layout I mentioned above on a fresh install and I’m still getting the same result.

    I’m not getting any errors in the console.

    Again, this problem only occurs when there is a substantial amount of content.

    As a side note, if I scroll down to the bottom of the content, the ‘pull-to-refresh’ not longer works by pulling from the top of the page. I have to be scrolled all the way to the top.

    Following is the template for the rendered ‘q-pull-to-refresh’ component.

    <template>
      <q-pull-to-refresh :handler="refresher">
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sed temporibus porro nihil vero, dignissimos velit ducimus dicta, similique alias rerum accusamus voluptatibus tenetur laboriosam nesciunt magnam error sequi maxime.</p>
        </div>
      </q-pull-to-refresh>
    </template>
    
    <script>
      export default {
        data: () => ({
    
        }),
        methods: {
          refresher (done) {
            console.log('Refreshed!')
            done()
          }
        },
        computed: {
    
        }
      }
    </script>
    
    <style lang="stylus" scoped>
    </style>
    


  • This post is deleted!


  • This post is deleted!


  • @benoitranque

    My last post shows the q-layout that I’m using.

    It’s the layout generated using the ‘quasar new layout’ command.

    I’m rendering the q-pull-to-refresh component (also above) using router-view.

    I’m not sure what else you could mean by q-layout.

    Please, let me know if there’s something I’m missing.

    Thanks again :-)


Log in to reply
 

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