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.
On subsequent opening the content style is changed as shown below.
Also I noted the rendering problem occurs only on firefox browser.
Any help is appreciated.
