I tried to insert a cascading modal into my Application. Because of different components i have to call it via the service. I also added class: 'cascading-modal' and containerClass: 'modal fade top' as config.In Chrome i have the view problem which could be watched into this picture:

https://i.imgur.com/eaqECpt.png

As You can see, the tabs are in the same height as the card.

Normally it should look something like this:

https://imgur.com/a/8WYlDF6

This problem don't occures in Safari.

My full Code is available here: https://github.com/ProxieTV/dreitoechter-web Some Snippets:

import { Component, OnInit } from '@angular/core';
import {MDBModalRef, MDBModalService} from 'ng-uikit-pro-standard';
import {KontaktModalComponent} from '../../modal/kontakt-modal/kontakt-modal.component';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  modalRef: MDBModalRef;

  constructor(private modalService: MDBModalService) { }

  openContact() {
    this.modalRef = this.modalService.show(KontaktModalComponent,   {
      class: 'modal-lg cascading-modal',
      containerClass: 'modal fade top',
    });
  }

  ngOnInit() {
  }

}

html:

<div class="m[enter link description here][1]odal-content">
  <div class="modal-c-tabs">
    <mdb-tabset [buttonClass]="'nav md-tabs tabs-2 warning-color'" [contentClass]="''" class="tab-content">
      <mdb-tab class="tab-pane fade in show active" id="panel1" role="tabpanel"
               heading="<i class='fas fa-envelope'></i> Nachricht senden">
        <div class="modal-body mb-1">
          <form [formGroup]="validatingForm">
            <div class="md-form mb-5">
              <mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
              <input type="text" id="form34" class="form-control" mdbInput mdbValidate
                     [formControl]="contactFormModalName">
              <label for="form34">Name</label>
            </div>

            <div class="md-form mb-5">
              <mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
              <input type="email" id="form29" class="form-control" mdbInput mdbValidate
                     [formControl]="contactFormModalEmail">
              <label for="form29">E-Mail</label>
            </div>

            <div class="md-form">
              <mdb-icon fas icon="pencil-alt" class="prefix grey-text"></mdb-icon>
              <textarea type="text" id="form8" class="md-textarea form-control" rows="2" mdbInput mdbValidate
                        [formControl]="contactFormModalMessage"></textarea>
              <label for="form8">Nachricht</label>
            </div>

            <div class="text-center form-group mt-4">
              <mdb-checkbox>Eine Kopie dieser Nachricht an meine E-Mail senden?</mdb-checkbox>
            </div>
          </form>

          <div class="text-center mt-2">
            <button mdbBtn color="warning" class="waves-light" mdbWavesEffect
                    [disabled]="contactFormModalName.invalid || contactFormModalEmail.invalid || contactFormModalMessage.invalid"
                    (click)="onSend()">Senden
              <mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
            </button>
          </div>
        </div>
      </mdb-tab>
      <mdb-tab class="tab-pane fade" id="panel2" role="tabpanel" heading="<i class='fas fa-phone-alt'></i> Anrufen">
        <div class="modal-body mb-1">
          <form [formGroup]="validatingForm">

          </form>
        </div>
      </mdb-tab>
      <mdb-tab class="tab-pane fade" id="panel3" role="tabpanel" heading="<i class='fas fa-user'></i> Termin vereinbaren">
        <div class="modal-body mb-1">
          <form [formGroup]="validatingForm">

          </form>
        </div>
      </mdb-tab>
    </mdb-tabset>
  </div>
</div>