bug: footer disappears in modal sheet for Angular
See original GitHub issuePrerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.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
- Create new project ionic + Angular
- Create new modal with ion-header, ion-content and ion-footer (not matter inline modal or modalController)
- Add different breakpoints for modal (for example you can use array with values [0.3, 0.6, 1] ).
- 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
Issue Analytics
- State:
- Created a year ago
- Comments:6 (2 by maintainers)
Top GitHub Comments
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.
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!