question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: footer disappears in modal sheet for Angular

See original GitHub issue

Prerequisites

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.

example

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Sep 9, 2022

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.

0reactions
ionitron-bot[bot]commented, Oct 5, 2022

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ion-footer tag doesn`t fix in Sheet Modal
Use Ionic v.6 (6.2.5) and Angular. I try to open Inline Sheet modal. When I use breakpoints, my footer is not fixed on...
Read more >
Bootstrap modal not displaying - Stack Overflow
If you're running Bootstrap 4, it may be due to ".fade:not(.show) { opacity: 0 }" in the Bootstrap css and your modal doesn't...
Read more >
5 Examples of the new Ionic 6 Bottom Sheet Modal
The Ionic 6 modal comes with a brand new presentation mode called bottom sheet, which is usually also known as bottom drawer in...
Read more >
Window, UI Widgets Webix Docs - Documentation
Once a modal window is shown, it waits for actions (e.g. enter data, press the button, etc.) and unless it is closed one...
Read more >
How to change the position of modal close button in bootstrap?
Example of a basic modal: For changing the position of the close button, we need to ... < div class = "modal-footer" id...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found