Creating a modal inside a relative parent

tester tester commented 6 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

tester tester commented 6 years ago

is there an answer?

Arkadiusz Idzikowski staff commented 6 years ago

Unfortunately this problem has not been solved yet.

Bill Bensing pro commented 6 years ago

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