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: incorrect large ion-title placement inside modal navigation using ion-nav

See original GitHub issue

Bug Report

Ionic version:

[x] ^5.0.4

Current behavior:

When you try navigating inside modal by using ion-nav, the placement of large ion-title is incorrectly aligned

Link to video

Expected behavior:

Large title transition on forward and back navigation should align correctly Steps to reproduce:

create a page which holds the ion-nav component and expects the component as input in .html file

<ion-nav [root]="component"></ion-nav>

set in the .ts file an input property for the component

@Component({
  selector: 'app-modal-outlet',
  templateUrl: './modal-outlet.page.html',
  styleUrls: ['./modal-outlet.page.scss'],
})
export class ModalOutletPage implements OnInit {

  @Input() component;

  constructor() { }

  ngOnInit() {}
}

create the modal using modalController in app.component.ts

  public async onOpenModal() {
    const modal = await this.modalController.create({
      component: ModalOutletPage,
      componentProps: { component: Test2Page },
    });
    return await modal.present();
  }

Link to repo

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.900.5
   @angular-devkit/schematics    : 9.0.5
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.0 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

Issue Analytics

State:
Created 4 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

DwieDimacommented, Mar 6, 2020

Now it’s working perfectly! Thank you @liamdebeasi for fast support.

1reaction

liamdebeasicommented, Mar 5, 2020

Thanks for the follow up. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/angular@5.1.0-dev.202003051630.531d9e4

Top Results From Across the Web

[Ionic v4] WHY cannot navigate (push) inside modal?!

I worked on some project with ionic v3 before and I have no problem with navigation inside modal anymore.

React Ionic Navigation with directly passed functional props

Now it appears that in order to navigate from screen to screen, Ionic requires you to use React Router, where each page has...

Webservices and cloud communication - European Commission

Navigation in Ionic works like a simple stack, where we push new pages onto the top of the stack, which takes us forwards...

Announcing Ionic Vue - Morioh

Ionic Vue represents a big milestone in Ionic Framework's development after the ... IonModal, IonPage }, setup() { const isOpen = ref(false); const...

jomendez - There's a way to do it better - find it. -Thomas A ...

The data is contained in three files: portfolio.json - containing offer ids and meta data about each offer (duration, type, etc.) profile.json -...