Bottom button not fixed

Hi!

is there a way to create this type of button? I can’t get it to be fixed in the bottom/footer.

I have tried with blockfooter but it is the footer of a block ,but this is footer of the page. I have tried using toolbar, but toolbar looks like the right one, and also it is not always at the bottom.

I am using react.

Any help is appreciated.

Try fix bottom toolbar

<Toolbar position="bottom">

Tried that already, not working.

<Toolbar bottom>
  <Button fill className="cancelButton">Cancel</Button>
</Toolbar>


.cancelButton{
  width: 100%;
  margin-left: var(--f7-safe-area-left);
  margin-right: var(--f7-safe-area-right);
}

Work fine in iOS, MD theme

Example: https://jsfiddle.net/Silver775/jpqc1v49/

I must apologize, I did not explain myself well enough. My problem is that the button is not supposed to be “fixed” almost on bottom, but it should be fixed to the bottom of the page, which means, if there is so much content that you can scroll, then the button is supposed to be at the bottom. The common issues I am having from all tests I have done, is that the bottom is fixed like the way you showed me, or, if the screen is large enough, the button stays a few pixels after the end of the content, but it’s not fixed to the end of the screen.

Fork my fiddle and past your code