Topic: Incorrect formation at cascading modals when using them dynamically

Florian Preuss free asked 3 years ago


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>

Arkadiusz Idzikowski staff commented 3 years ago

Which version of chrome do you use?


Florian Preuss free commented 3 years ago

I'm using version 78.0.3904.70 (yesterday installed)


Bartosz Termena staff commented 3 years ago

Hi!

You are right, in chrome v.78 tabs don't look like they should. We will try to fix it as soon as possible

Best Regards, Bartosz.


Bartosz Termena staff answered 3 years ago


Dear @Preuss

I looked at your application and I noticed you were adding class="tab-content" to your <mdb-tabset>...

Please remove this class, and everything should work fine.

Like below:

<div class="modal-content">
  <div class="modal-c-tabs">
    <mdb-tabset [buttonClass]="'nav md-tabs tabs-2 warning-color'" [contentClass]="''" >
      <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>

Hope it helps!

Best Regards, Bartosz.



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

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: Mac Book Air 2011
  • Browser: Google Chrome
  • OS: Mac OS X / Windows 10
  • Provided sample code: No
  • Provided link: Yes