bug: footer disappears in modal sheet for Angular

[SuvorovAlexey]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

Footer is not fixed on the bottom of a page. If I use sheet modal with breakpoints, I dont`t see ion-footer with the exception case when I open modal with breakpoint = 1.

Expected Behavior

Ion-footer fixed and visible at bottom of the page on any breakpoint.

Steps to Reproduce

1. Create new project ionic + Angular
2. Create new modal with ion-header, ion-content and ion-footer (not matter inline modal or modalController)
3. Add different breakpoints for modal (for example you can use array with values [0.3, 0.6, 1] ).
4. Try to see ion footer when breakpoints is not equal 1

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 6.2.4 @angular-devkit/build-angular : 13.2.6 @angular-devkit/schematics : 13.2.6 @angular/cli : 13.3.8 @ionic/angular-toolkit : 3.1.1

Cordova:

Cordova CLI : 11.0.0 Cordova Platforms : android, ios Cordova Plugins : no whitelisted plugins (1 plugins total)

Utility:

cordova-res : 0.15.4 native-run : not installed

System:

Android SDK Tools : 26.1.1 (/home/alexey/Android/Sdk/) NodeJS : v16.14.1 (/home/alexey/.nvm/versions/node/v16.14.1/bin/node) npm : 8.5.0 OS : Linux 5.15

────────────────────────────────────────────────────────────

Additional Information

IMPORTANT : This bug has been fixed for React https://github.com/ionic-team/ionic-framework/pull/24510 but I stiil see this bug in Angular

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[SuvorovAlexey]

@liamdebeasi reproduction with StackBlitz: Application URL: https://ionic6-angular13-szrffo.stackblitz.io Editor URL: https://stackblitz.com/edit/ionic6-angular13-szrffo?file=src/app/app.component.html

[liamdebeasi]

Thanks for the follow up. When you swipe to expand the sheet, you are moving the sheet, not resizing it. As a result, the footer will be off screen until the sheet is fully expanded. This is the intended behavior and is the same as what the header does (the header moves offscreen as you swipe to dismiss the sheet). For this reason we typically do not recommend using footers or bottom toolbars in sheet modals.

[qliqdev]

@liamdebeasi is it possible to add some attribute for modal ion-footer to make it fixed on bottom even if modal is not fully expanded?

[liamdebeasi]

There is no attribute to do that because it would break the flex layout and likely impact the size of the ion-content inside of the modal. You could try using position: absolute and see if that helps for your app.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!