Topic: Creating a modal inside a relative parent

tester tester free asked 5 years ago

When i write a modal code inside an element with position relative the modal backdrop is appended to the body and the modal itself is behind the backdrop,   how can i fix this?

Arkadiusz Idzikowski staff answered 4 years ago

Dynamic modal is a free component. It is always better idea to use dynamic version if you want to add modal inside another component, because there is a chance that this component have styles that will prevent static modal from rendering correctly.

sharmila_rajan free answered 4 years ago

This Dynamic modal is a pro component ? And even inside a mat-tab we are supposed to use this "Dynamic modal" ?

Arkadiusz Idzikowski staff answered 5 years ago

Please try to use our dynamic modal instead of static one, that should resolve the problem:

Arkadiusz Idzikowski staff answered 5 years ago

Thank you for the code. We will take a closer look at this problem.

tester tester free commented 5 years ago

is there an answer?

Arkadiusz Idzikowski staff commented 5 years ago

Unfortunately this problem has not been solved yet.

Bill Bensing pro commented 5 years ago

I'm having this issue as well. Any resolution, or work around?

Arkadiusz Idzikowski staff answered 5 years ago

Hello, Could you provide an example code on which I would be able to debug this problem? Regards, Arek

tester tester free commented 5 years ago

this is my app.component.html file

<div fxFlex>
<mat-sidenav-container fxFill fullscreen>
<mat-sidenav #sidenav mode="over""has-border">
<a mat-list-item routerLink="/home" routerLinkActive="active" (click)="sidenav.close()">
<span translate>Home</span>
<a mat-list-item routerLink="/about" routerLinkActive="active" (click)="sidenav.close()">
<span translate>About</span>

<mat-sidenav-content style="flex-direction: column; display: flex;">
<app-header [sidenav]="sidenav"></app-header>
<div fxFlex>

and this is the footer.component.html file:


<mat-toolbar class="mat-elevation-z6 navbar" color="primary">
<span fxFlex></span>

<div class="text-white" fxLayout="row">
<button mat-button class="mr-4" (click)="">שכחתי סיסמא</button>
<button mat-button routerLink="/help" class="mr-4">עזרה</button>
<button mat-button routerLink="/terms" class="mr-4">תנאי שימוש</button>

<div mdbModal #basicModal="mdbModal" class="modal fade" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: true}" >
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-right">
<p>הכנס את כתובת הדואל שלך ואנחנו נשלח לך הנחיות לחידוש הסיסמא</p>

<div class="md-form">
<input mdbInputDirective type="text" id="form1" class="form-control" [(ngModel)]="email"/>
<label for="form1">דוא"ל</label>
<div class="modal-footer">
<button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>

mat-sidenav-content, mat-sidenav-container have position: relative property.

and this is the result:




Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No