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: Inline Modals not working

See original GitHub issue

Bug 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>
  1. My IDEA (IntelliJ) says Attribute trigger is not allowed here, but i don’t know if this is something that you can fix.
  2. 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:closed
  • Created 2 years ago
  • Comments:12 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Jul 21, 2021

For Angular I would recommend that approach.

1reaction
EinfachHanscommented, Jul 1, 2021

Amazing thank you! 😃 I will continue testing the beta in the next days

Read more comments on GitHub >

github_iconTop 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 >

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