How to create bottom-sticking buttons idiomatically?

Ionic Framework Ionic Vue
1

What is the idiomatic way to create a pair of Cancel and Done sticky bottom buttons that take up full width? Here is an example:

IMG_D16F8CF741DD-1
IMG_D16F8CF741DD-11170×2532 174 KB

I don’t see a way to do without a hacky CSS. I don’t see a way to do declaratively here ion-button: Ionic Framework API Docs

Any ideas?

2

have you tried using IonFooter? and removing the padding and margin around the buttons?

3

D’oh! Thank you–but I assume that can’t be used if I have bottom tab nav, or can it? I will try. My use case is modal, so footer should work fine.

4

So, footer doesn’t work on pages that already have a tab nav footer. Any tips on a non-hacky way to stack it above the bottom tab primary nav?

5

put this after the </ion-content> but before </ion-page>

    <div style="display: grid; grid-auto-flow: column; grid-gap: 0px;">
      <ion-button expand="full" style="margin: 0px; padding: 0px"
        >AT BOTTOM</ion-button
      >
      <ion-button
        expand="full"
        style="margin: 0px;  padding: 0px"
        color="danger"
        >AT BOTTOM ALSO</ion-button
      >
    </div>

Screen Shot 2021-09-01 at 12.07.01 AM
Screen Shot 2021-09-01 at 12.07.01 AM912×1326 44.1 KB

6

Fantastic, thank you!

7

One last thing–the buttons hang around until after the exit screen transition is completed, so that they appear on the next screen as it loads and then disappear. Any tips on how to make them disappear with the rest of their page? I could set flags on Ionic lifecycle hooks but wondered if less hackyish way?

8

Actually, using ionViewWillLeave() works fine to hide the footer buttons on exit. It doesn’t animate with the exiting screen but it is barely noticeable.