Ionic modal and content not rendering well

I created a modal component but it only renders the content well when opening it the first time. Subsequent openings the modal does not render the content correctly. The modal’s position is chanded, the header can be hidden, font color is changed, all content can be hidden e.t.c.

I have declared the modal in the module that opens it and added it in entrycomponents.

Can it be a css issue?

I’m using ionic 5.6.5 and angular 11.

module containg the modal component

@NgModule({
  declarations: [HomePage, AllordersComponent],
  imports: [
    IonicModule.forRoot(),
    CommonModule,
    FormsModule,
    HomePageRoutingModule
  ],
  entryComponents: [AllordersComponent]
})
export class HomePageModule {}

code for opening modal

async openModal() {
    const modal = await this.modalCtrl.create({
        component: AllordersComponent
      });
      return await modal.present();
    }

code inside the modal component html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>



<ion-content>
  <div id="container">
    <strong>Ready to create an app?</strong>
    <ion-button (click)="dismiss()">Close modal</ion-button>
  </div>
</ion-content>

code for closing the modal

async dismiss() {
    return await this.modalCtrl.dismiss();
  }

on first opening it displays well as shown below.

Screen Shot 2021-04-29 at 16.00.49364×605 9.01 KB

On subsequent opening the content style is changed as shown below.

Screen Shot 2021-04-29 at 16.01.34364×605 7.69 KB

Also I noted the rendering problem occurs only on firefox browser.

Any help is appreciated.

1 post - 1 participant

Read full topic