Creating a modal inside a relative parent

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.

Add comment

sharmila_rajan free answered 4 years ago

0 0 Best answer

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

Add comment

Arkadiusz Idzikowski staff answered 4 years ago

0 0 Best answer

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

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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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 4 years ago

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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

this is my app.component.html file
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 9.0pt;"><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()"> translate>Home </a> <mat-divider></mat-divider> <a mat-list-item routerLink="/about" routerLinkActive="active" (click)="sidenav.close()"> translate>About </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> </pre>
and this is the footer.component.html file:
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 9.0pt;"><mat-toolbar class="mat-elevation-z6 navbar" color="primary"> fxFlex> <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"> הכנס את כתובת הדוא”ל שלך ואנחנו נשלח לך הנחיות לחידוש הסיסמא <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></pre>
mat-sidenav-content, mat-sidenav-container have position: relative property.
and this is the result:
 
https://i.imgur.com/Fr7Z2zi.jpg
<img src="https://i.imgur.com/Fr7Z2zi.jpg" />

Please insert min. 15 characters.

Add comment