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:

https://mdbootstrap.com/docs/angular/modals/basic/#dynamic


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" ngClass.gt-sm="has-border">
<nav>
<mat-list>
<mat-divider></mat-divider>
<a mat-list-item routerLink="/home" routerLinkActive="active" (click)="sidenav.close()">
<span translate>Home</span>
</a>
<mat-divider></mat-divider>
<a mat-list-item routerLink="/about" routerLinkActive="active" (click)="sidenav.close()">
<span translate>About</span>
</a>
<mat-divider></mat-divider>
</mat-list>
</nav>
</mat-sidenav>

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

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)="basicModal.show()">שכחתי סיסמא</button>
<button mat-button routerLink="/help" class="mr-4">עזרה</button>
<button mat-button routerLink="/terms" class="mr-4">תנאי שימוש</button>
</div>
</mat-toolbar>

<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>
</div>
<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>
</div>
</div>
</div>
</div>

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

and this is the result:

 

https://i.imgur.com/Fr7Z2zi.jpg

 

 

 



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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