How do I use pull-to-refresh with no-navbar

How do I use pull-to-refresh with .no-navbar class? I noticed that the Framework7 css has a class and styles for .ptr-no-navbar. I want to have no navbar but I also want the pull to refresh functionality.

I currently have this …

<div id="branch-detail" class="page no-navbar">
  <div class="page-content ptr-content ptr-no-navbar" @ptr:refresh="refresh">
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    <div class="display-flex flex-direction-column justify-content-flex-end align-items-stretch full-height">

.full-height {
  min-height: 100%;

I want the inner flex div fill the screen height… the problem is, it’s currently longer than the screen by the navbar height.

By default it works as supposed. Problem can be in your:

JSFiddle will be great

Here you can see that the combination of the pull to refresh and no-navbar styles along with my full-height style is causing the page to scroll which I am trying to prevent.

Ok, this is CSS basics. Use height: calc(100% - 44px) instead

1 Like

Thank you. But please could you tell me where I would use the .ptr-no-navbar class? Did you intent for this to be added to .page or .page-content? Or is this not needed?

It should be on ptr-content, but F7 adds it automatically on page init, so you can omit it

1 Like

Ah great. Thanks. I get it now.