Floating content inside scrolling ion-content

ionic-v1
1

image
ionic.png951×649 16 KB

Hi,
I want a “absolute floating button” inside a ion-content
and I want this button to keep the same position during scroll.

The picture above show what I want to do.

I tried to use a ion-scroll inside my ion-content.
But I am not satisfied.
Now, my view is buggy.
Something when i scroll, i lose the top or the bottom of the content.
Sometimes I can not even scroll anymore and it lose responsiveness for big screen
like an IPAD when i fix the ion-scroll size.

Notice that if I put the button outside the ion-content, below the tab menu, it works.
I need it inside the QuoteCtrl.

Thank you.

1 Like
2

Hey @guerson

you mean something like this? :wink: I am using this in my current project and it’s working like a charm.

3

Thank for your quick answer.

I have already tried this extention.
The button move with the ion-content when there is too much data.
If the data fit the screen i have no problem.

4

Hm…that is strange. Did you put the ion-floating-button OUTSIDE of ion-content or wrapped into it?

5

Sure.
The ion-floating-button was inside the ion-content.
The ion-content have one controller name “QuoteCrl” that contains all function that will triggers the floating button.
I need the button inside de ion-content with absolute position.

6

it should be outside ion-content…

7

@anicacute09 is correct. It must not be inside ion-content!