bug: Inline Modals not working
See original GitHub issueBug Report
Ionic version:
[ ] 4.x [ ] 5.x [X] 6.x
Current behavior:
I’m currently trying to open a inlined Modal with a Datetime Component in it. As this also doesn’t work with any other stuff inside i guess it’s a Modal Issue.
My Code:
<ion-modal trigger="open-modal">
<ion-datetime></ion-datetime>
</ion-modal>
- My IDEA (IntelliJ) says Attribute trigger is not allowed here, but i don’t know if this is something that you can fix.
- If i press the button with the matching id a modal opens but it’s just a white screen.
Even if i design my Modal like:
<ion-modal>
<ion-header>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
</ion-modal>
it’s just a white modal.
Additional Question:
- Is it possible to somehow use
presentingElement
&swipeToClose
in an inlined Modal? - What i want to create is a effect that you have an image at the bottom of your screen and if you pull and swipe this image up it transforms into a “normal” modal. For that i think to adjust the present & dismiss animation of the inlined modal as weill
Expected behavior:
To correctly opens the Modal.
Steps to reproduce:
I created a small Repo: https://github.com/EinfachHans/ionic-inline-modal-bug
Ionic info:
Ionic:
Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.0-beta.0
@angular-devkit/build-angular : 12.0.5
@angular-devkit/schematics : 12.0.5
@angular/cli : 12.0.5
@ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.0.2
@capacitor/android : not installed
@capacitor/core : 3.0.2
@capacitor/ios : not installed
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run : 1.4.0
System:
NodeJS : v14.15.4 (/usr/local/bin/node)
npm : 7.17.0
OS : macOS Big Sur
Issue Analytics
- State:
- Created 2 years ago
- Comments:12 (9 by maintainers)
Top Results From Across the Web
Bootstrap modal body inline stye is not working - Stack Overflow
As your are using bootstrap modals. Its very easy. Just add <div class="clearfix"> ...
Read more >On-Change Dynamic Action in Inline Dialog Region Not ...
I am working with Apex 5.1. I have a report that calls a modal page for edits. On this modal update page (form),...
Read more >Transactional modal - Carbon Design System
Modals focus the user's attention exclusively on one task or piece of information ... due to server-side issues then an inline notification should...
Read more >10 Most Common Bootstrap Mistakes That Developers Make
Bootstrap modal appears under background ... If the modal container or its parent element has a fixed or relative position, the modal will...
Read more >Ion-footer tag doesn`t fix in Sheet Modal
This situation apply for Inline modal and Modal Controller. Attach screenshots of package.json and html, also video with my problem. What I ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
For Angular I would recommend that approach.
Amazing thank you! 😃 I will continue testing the beta in the next days