[Bug] Floating Action Button won't move when scrolling

1

I’ve encountered a problem with a Floating Action Button - it won’t move when scrolling, only when the window is resized.

I’ve tested this both on PC with Chrome and Firefox and on a Cordova Android App - FAB behaves the same everywhere, being always “stuck”. I’ve tested both with a Vue component and core component.

Here’s the code:
<f7-fab v-if=“Itemss.length > 0” position=“right-bottom” @click=“OpenNewForm()”>
<f7-icon md=“material:add”></f7-icon>
</f7-fab>
<div class=“fab fab-left-bottom”>
<a href="#">
<i class=“icon f7-icons”>plus</i>
</a>
</div>

I tried to remove everything on the page and just fill it with <br /> elements, suspecting the contents of the page could cause this behavior, but it still was broken.

I’m using the version 6.0.14.

2

I’ve just realized that my previous post may sound confusing.

The problem is FAB isn’t “floating” as it should at the specified screen position, it scrolls with the page content. I.e. it’s possible to scroll the contents of the page down and the FAB will be hidden.

3

For me it sounds like you have put in into the wrong place, it must be a direct child of the page, look at demos here Floating Action Button Vue Component | Framework7 Vue Documentation

4

Turns out you can’t event put it in a <template> element, it has to be a direct child of the page. Also this only fixed the <f7-fab> element, the element written with Core “fab” class still scrolling with the contents of the page.

The most interesting part is it broke suddenly, I ran this setup for a year and it’s never been a problem.