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

[joefly]

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>

Is there any way to avoid this?

Thanks

[benoitranque]

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

[joefly]

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

[benoitranque]

Do you get any errors in console?

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

[joefly]

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>

[joefly]

This post is deleted!

[joefly]

This post is deleted!

[joefly]

@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

[joefly]

If anyone is having an issue with the footer ending up in the middle of the page, I found that fixing the footer to the bottom using css helps:

        <!-- Footer -->
        <q-toolbar slot="footer" style="position: fixed; bottom: 0;">
          <q-toolbar-title>
            Layout Footer
          </q-toolbar-title>
        </q-toolbar>

My experience has been that if I have a lot of content and I scroll to the bottom, pulling from the top of the page no longer works. However, if you are rendering new content at the top of the page (like in the docs) then it’s really not an issue I guess…