1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Dynamic "Cascading modal register/login" Without Square Background

ewgiddings free asked 4 years ago

Expected behavior

Using the dynamic modal to show a component that holds the HTML for the "Cascading modal register/login" example shown here: https://mdbootstrap.com/docs/angular/modals/forms/ And having it look like the example. Also being able to search for "Dynamic Modal" or something similar so it's not so hard to find in the docs and have the docs show all the options I can pass in & what they represent.

Actual behavior

There is a square background behind the modal that pops up. The modal looks and behaves as it is in the examples, but it is surrounded by a square box background that is the dynamic-modal div I believe.

I tried adding various different config to my dynamic modal reference, but no addition to class or containerClass seemed to remove this solid square background behind the modal content.

I searched and cannot find docs on dynamic modals and how to create them and what options are available and what they represent.

Resources (screenshots, code snippets etc.)

I erased the code, but if you simply attempt to use that cascading example in a dynamic-modal I believe you will see what I saw. If you know how to make it not have that background can you please share the code? Can you also share a link to where I can find dynamic modal docs for Angular?

Thank you.

Konrad Stępień staff commented 4 years ago

Could you point me at the screenshot, what exactly do you mean?

I recreated the example and it's supposed to be ok, but I want to make sure that we mean the same thing.

ewgiddings free commented 4 years ago

@Konrad Stępień

I erased all of the code for it. I didn't take a screenshot. I needed a solution that worked so I just put the modal into another component instead of opening it dynamically. The problem is that the dynamically opened modal puts a white square behind the cascaded modal with the tabs. Looks like the cascaded modal is inside an outer frame modal with the class of dynamic-modal.

Is there anywhere I can find code for a dynamically opened modal of that cascaded type? You attempted to open up that tabbed example as a dynamic one and didn't see what I am referring to? Can you share your code because I have exhausted attempts to remove the outter modal behind the tabbed modal.

See the image for the modal version I want to open using the modal directive, modal ref, as the HTML is in a modal component. The image is how it looks when I open it. There's a white square behind the actual modal. Like the modal I want is placed inside a square modal. If you open the actual image link you can see there's a white box behind it. that's how it looks. Right click the image and open in new tab to see what I am seeing the modal as.

Description

This is an example of the code I attempted to use to open the modal dynamically and subscribe to the actions:

modalRef: MDBModalRef;
modal2Show: ComponentType<any>;
constructor(private modalService: MDBModalService)

this.modal2Show = LoginRegisterModalFormComponent;

this.modalRef = this.modalService.show(this.modal2Show, {
  scroll: true,
  backdrop: false,
  keyboard: true,
  focus: true,
  show: false,
  ignoreBackdropClick: false,
  containerClass: 'modal fade',
  animated: true,
  tabindex: '-1',
  role: 'dialog',
  ariaHidden: 'true',
  data: {
    data: 'Test data'
  }
});

Then the HTML in that component starts with line 28 in the docs code:

<div class="modal-c-tabs">

Does this help clarify? What in my code Typescript or HTML is lacking or causing a white box to be around the cascading modal I open? It's like the cascading modal is placed inside a square modal.

Konrad Stępień staff answered 4 years ago

Hi @ewgiddings,

I see the problem. I had to overlook this background. I apologize for that.

I fixed it with remove margin from modal-dialog with .m-0 class and then I repair position of modal with style="position: fixed; top: 10%"

My full code:

modal.html

<div class="modal-dialog cascading-modal m-0" style="position: fixed; top: 10%" role="document">
  <!--Content-->
  <div class="modal-content bg-transparent">
    <!--Modal cascading tabs-->
    <div class="modal-c-tabs bg-white">
      <!-- Tab panels -->
      <mdb-tabset
        #staticTabs
        [buttonClass]="'nav md-tabs tabs-2 light-blue darken-3'"
        [contentClass]="''"
        class="tab-content"
      >
        <!--Panel 7-->
        <mdb-tab
          class="tab-pane fade in show active"
          id="panel7"
          role="tabpanel"
          heading="<i class='fas fa-user'></i> Login"
        >
          <!--Body-->
          <div class="modal-body mb-1">
            <form [formGroup]="validatingForm">
              <div class="md-form form-sm">
                <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                <input
                  mdbInput
                  mdbValidate
                  type="text"
                  id="form22"
                  class="form-control"
                  formControlName="modalFormLoginEmail"
                />
                <label for="form22">Your email</label>
                <mdb-error
                  *ngIf="
                      modalFormLoginEmail.invalid &&
                      (modalFormLoginEmail.dirty || modalFormLoginEmail.touched)
                    "
                >
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="
                      modalFormLoginEmail.valid &&
                      (modalFormLoginEmail.dirty || modalFormLoginEmail.touched)
                    "
                >Input valid
                </mdb-success>
              </div>

              <div class="md-form form-sm">
                <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                <input
                  mdbInput
                  mdbValidate
                  type="password"
                  id="form23"
                  class="form-control"
                  formControlName="modalFormLoginPassword"
                />
                <label for="form23">Your password</label>
                <mdb-error
                  *ngIf="
                      modalFormLoginPassword.invalid &&
                      (modalFormLoginPassword.dirty || modalFormLoginPassword.touched)
                    "
                >
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="
                      modalFormLoginPassword.valid &&
                      (modalFormLoginPassword.dirty || modalFormLoginPassword.touched)
                    "
                >
                  Input valid
                </mdb-success>
              </div>
            </form>
            <div class="text-center mt-2">
              <button mdbBtn color="info" class="waves-light" mdbWavesEffect>
                Log in
                <mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
              </button>
            </div>
          </div>
          <!--Footer-->
          <div class="modal-footer display-footer">
            <div class="options text-center text-md-right mt-1">
              <p>
                Not a member?
                <a href="#" class="blue-text">Sign Up</a>
              </p>
              <p>
                Forgot
                <a href="#" class="blue-text">Password?</a>
              </p>
            </div>
            <button
              type="button"
              mdbBtn
              color="info"
              outline="true"
              class="ml-auto"
              data-dismiss="modal"
              mdbWavesEffect
            >
              Close
            </button>
          </div>
        </mdb-tab>
        <!--/.Panel 7-->

        <!--Panel 8-->
        <mdb-tab
          class="tab-pane fade"
          id="panel8"
          role="tabpanel"
          heading="<i class='fas fa-user-plus'></i> Register"
        >
          <!--Body-->
          <div class="modal-body">
            <form [formGroup]="validatingForm">
              <div class="md-form form-sm">
                <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                <input
                  mdbInput
                  mdbValidate
                  type="text"
                  id="form24"
                  class="form-control"
                  formControlName="modalFormRegisterEmail"
                />
                <label for="form24">Your email</label>
                <mdb-error
                  *ngIf="
                      modalFormRegisterEmail.invalid &&
                      (modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)
                    "
                >
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="
                      modalFormRegisterEmail.valid &&
                      (modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)
                    "
                >
                  Input valid
                </mdb-success>
              </div>

              <div class="md-form form-sm">
                <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                <input
                  mdbInput
                  mdbValidate
                  type="password"
                  id="form25"
                  class="form-control"
                  formControlName="modalFormRegisterPassword"
                />
                <label for="form25">Your password</label>
                <mdb-error
                  *ngIf="
                      modalFormRegisterPassword.invalid &&
                      (modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)
                    "
                >
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="
                      modalFormRegisterPassword.valid &&
                      (modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)
                    "
                >
                  Input valid
                </mdb-success>
              </div>

              <div class="md-form form-sm">
                <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                <input
                  mdbInput
                  mdbValidate
                  type="password"
                  id="form26"
                  class="form-control"
                  formControlName="modalFormRegisterRepeatPassword"
                />
                <label for="form26">Repeat password</label>
                <mdb-error
                  *ngIf="
                      modalFormRegisterRepeatPassword.invalid &&
                      (modalFormRegisterRepeatPassword.dirty ||
                        modalFormRegisterRepeatPassword.touched)
                    "
                >
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="
                      modalFormRegisterRepeatPassword.valid &&
                      (modalFormRegisterRepeatPassword.dirty ||
                        modalFormRegisterRepeatPassword.touched)
                    "
                >
                  Input valid
                </mdb-success>
              </div>

              <div class="text-center form-sm mt-2">
                <button mdbBtn color="info" class="waves-light" mdbWavesEffect>
                  Sign up
                  <mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
                </button>
              </div>
            </form>
          </div>
          <!--Footer-->
          <div class="modal-footer">
            <div class="options text-right">
              <p class="pt-1">
                Already have an account?
                <a href="#" class="blue-text">Log In</a>
              </p>
            </div>
            <button
              type="button"
              mdbBtn
              color="info"
              outline="true"
              class="ml-auto"
              data-dismiss="modal"
              mdbWavesEffect
            >
              Close
            </button>
          </div>
        </mdb-tab>
        <!--/.Panel 8-->
      </mdb-tabset>
    </div>
  </div>
  <!--/.Content-->
</div>

modal.ts

import { Component, OnInit } from '@angular/core';
import { MDBModalRef } from 'ng-uikit-pro-standard';
import { FormControl, Validators, FormGroup } from '@angular/forms';


@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  validatingForm: FormGroup;

  constructor(public modalRef: MDBModalRef) {}

  ngOnInit() {
    this.validatingForm = new FormGroup({
      modalFormLoginEmail: new FormControl('', Validators.email),
      modalFormLoginPassword: new FormControl('', Validators.required),
      modalFormRegisterEmail: new FormControl('', Validators.email),
      modalFormRegisterPassword: new FormControl('', Validators.required),
      modalFormRegisterRepeatPassword: new FormControl('', Validators.required)
    });
  }

  get modalFormLoginEmail() {
    return this.validatingForm.get('modalFormLoginEmail');
  }

  get modalFormLoginPassword() {
    return this.validatingForm.get('modalFormLoginPassword');
  }

  get modalFormRegisterEmail() {
    return this.validatingForm.get('modalFormRegisterEmail');
  }

  get modalFormRegisterPassword() {
    return this.validatingForm.get('modalFormRegisterPassword');
  }

  get modalFormRegisterRepeatPassword() {
    return this.validatingForm.get('modalFormRegisterRepeatPassword');
  }
}

app.html

<button mdbBtn color="primary" (click)="openModal()">Open modal</button>

app.ts

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

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

  constructor(private modalService: MDBModalService) {}

  openModal() {
    this.modalRef = this.modalService.show(ModalComponent);
  }

  ngOnInit() {

  }
}

And this is my result:

modal example

Can you test my code?

Best, Konrad.

ewgiddings free commented 4 years ago

Thank you! I will test your code tonight US Central time and let you know if it fixes the issue. If it doesn't I'll share with you the exact code I have used :)

ewgiddings free commented 4 years ago

It worked :) Thanks so much for that fix! The additions you made allowed that modal to be opened dynamically without the background.

Konrad Stępień staff commented 4 years ago

I am very happy that I did can help you :)

If you have more issues I glad to help you.

Best, Konrad.

ewgiddings free commented 4 years ago

Hi @Konrad Stępień

The content for this modal got quite long and I realized that the fixed position of your fix prevents it from being scrolled. I was able to get it to be scrolled by removing that, but now the top 10% does not get recognized. I tried various ways to get the 10% back but can't figure it out. Any idea how to fix this while allowing scrollable content and giving some margin on the top?

Konrad Stępień staff commented 4 years ago

Hi @ewgiddings,

Can you change these files?

styles.scss (global styles):

.modal-open .modal {
    overflow-y: scroll !important;
}

modal.component.html

    <div class="modal-dialog cascading-modal" style="position: absolute;" role="document">
        <!--Content-->
        <div class="modal-content bg-transparent">
        <!--Modal cascading tabs-->
        <div class="modal-c-tabs bg-white">
            <!-- Tab panels -->
            <mdb-tabset
            #staticTabs
            [buttonClass]="'nav md-tabs tabs-2 light-blue darken-3'"
            [contentClass]="''"
            class="tab-content"
            >
            <!--Panel 7-->
            <mdb-tab
                class="tab-pane fade in show active"
                id="panel7"
                role="tabpanel"
                heading="<i class='fas fa-user'></i> Login"
            >
                <!--Body-->
                <div class="modal-body mb-1">
                <form [formGroup]="validatingForm">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis libero non suscipit eleifend. Nulla rutrum tempus lacus, ac sollicitudin sapien vehicula ac. Proin porttitor iaculis purus, at sagittis nisl ultrices vitae. In aliquet lobortis ipsum eu commodo. Donec scelerisque placerat nibh ut ornare. Proin sit amet mattis nisi. Aliquam consectetur neque sollicitudin justo accumsan maximus. Morbi molestie sem lacus, eget mollis ipsum scelerisque eget. Praesent pellentesque semper consectetur. Pellentesque dictum velit eget ullamcorper eleifend. Curabitur semper metus sit amet ex pretium suscipit.

                    Aliquam diam ex, varius ac leo et, auctor consectetur est. Fusce pellentesque turpis vel fringilla condimentum. Fusce enim mauris, blandit vel suscipit ac, imperdiet sed mi. Nunc bibendum risus sed quam cursus, in fringilla ligula tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum pretium tristique ligula id consectetur. Aliquam erat volutpat. Pellentesque eleifend mattis posuere. Pellentesque porta ligula nec dapibus pellentesque.

                    Nulla commodo nunc nec porta sollicitudin. Donec quis sagittis risus, sit amet posuere eros. Pellentesque ut dolor nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla id diam ac sapien ornare aliquet vel eget nibh. In hac habitasse platea dictumst. Duis ut odio commodo, semper justo id, maximus lectus. Donec congue tellus sapien, vitae gravida purus rhoncus eget. Suspendisse lorem metus, gravida sit amet dolor et, volutpat faucibus metus.
                    <div class="md-form form-sm">
                    <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                    <input
                        mdbInput
                        mdbValidate
                        type="text"
                        id="form22"
                        class="form-control"
                        formControlName="modalFormLoginEmail"
                    />
                    <label for="form22">Your email</label>
                    <mdb-error
                        *ngIf="
                            modalFormLoginEmail.invalid &&
                            (modalFormLoginEmail.dirty || modalFormLoginEmail.touched)
                        "
                    >
                        Input invalid
                    </mdb-error>
                    <mdb-success
                        *ngIf="
                            modalFormLoginEmail.valid &&
                            (modalFormLoginEmail.dirty || modalFormLoginEmail.touched)
                        "
                    >Input valid
                    </mdb-success>
                    </div>

                    <div class="md-form form-sm">
                    <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                    <input
                        mdbInput
                        mdbValidate
                        type="password"
                        id="form23"
                        class="form-control"
                        formControlName="modalFormLoginPassword"
                    />
                    <label for="form23">Your password</label>
                    <mdb-error
                        *ngIf="
                            modalFormLoginPassword.invalid &&
                            (modalFormLoginPassword.dirty || modalFormLoginPassword.touched)
                        "
                    >
                        Input invalid
                    </mdb-error>
                    <mdb-success
                        *ngIf="
                            modalFormLoginPassword.valid &&
                            (modalFormLoginPassword.dirty || modalFormLoginPassword.touched)
                        "
                    >
                        Input valid
                    </mdb-success>
                    </div>
                </form>
                <div class="text-center mt-2">
                    <button mdbBtn color="info" class="waves-light" mdbWavesEffect>
                    Log in
                    <mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
                    </button>
                </div>
                </div>
                <!--Footer-->
                <div class="modal-footer display-footer">
                <div class="options text-center text-md-right mt-1">
                    <p>
                    Not a member?
                    <a href="#" class="blue-text">Sign Up</a>
                    </p>
                    <p>
                    Forgot
                    <a href="#" class="blue-text">Password?</a>
                    </p>
                </div>
                <button
                    type="button"
                    mdbBtn
                    color="info"
                    outline="true"
                    class="ml-auto"
                    data-dismiss="modal"
                    mdbWavesEffect
                >
                    Close
                </button>
                </div>
            </mdb-tab>
            <!--/.Panel 7-->

            <!--Panel 8-->
            <mdb-tab
                class="tab-pane fade"
                id="panel8"
                role="tabpanel"
                heading="<i class='fas fa-user-plus'></i> Register"
            >
                <!--Body-->
                <div class="modal-body">
                <form [formGroup]="validatingForm">
                    <div class="md-form form-sm">
                    <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                    <input
                        mdbInput
                        mdbValidate
                        type="text"
                        id="form24"
                        class="form-control"
                        formControlName="modalFormRegisterEmail"
                    />
                    <label for="form24">Your email</label>
                    <mdb-error
                        *ngIf="
                            modalFormRegisterEmail.invalid &&
                            (modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)
                        "
                    >
                        Input invalid
                    </mdb-error>
                    <mdb-success
                        *ngIf="
                            modalFormRegisterEmail.valid &&
                            (modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)
                        "
                    >
                        Input valid
                    </mdb-success>
                    </div>

                    <div class="md-form form-sm">
                    <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                    <input
                        mdbInput
                        mdbValidate
                        type="password"
                        id="form25"
                        class="form-control"
                        formControlName="modalFormRegisterPassword"
                    />
                    <label for="form25">Your password</label>
                    <mdb-error
                        *ngIf="
                            modalFormRegisterPassword.invalid &&
                            (modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)
                        "
                    >
                        Input invalid
                    </mdb-error>
                    <mdb-success
                        *ngIf="
                            modalFormRegisterPassword.valid &&
                            (modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)
                        "
                    >
                        Input valid
                    </mdb-success>
                    </div>

                    <div class="md-form form-sm">
                    <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                    <input
                        mdbInput
                        mdbValidate
                        type="password"
                        id="form26"
                        class="form-control"
                        formControlName="modalFormRegisterRepeatPassword"
                    />
                    <label for="form26">Repeat password</label>
                    <mdb-error
                        *ngIf="
                            modalFormRegisterRepeatPassword.invalid &&
                            (modalFormRegisterRepeatPassword.dirty ||
                            modalFormRegisterRepeatPassword.touched)
                        "
                    >
                        Input invalid
                    </mdb-error>
                    <mdb-success
                        *ngIf="
                            modalFormRegisterRepeatPassword.valid &&
                            (modalFormRegisterRepeatPassword.dirty ||
                            modalFormRegisterRepeatPassword.touched)
                        "
                    >
                        Input valid
                    </mdb-success>
                    </div>

                    <div class="text-center form-sm mt-2">
                    <button mdbBtn color="info" class="waves-light" mdbWavesEffect>
                        Sign up
                        <mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
                    </button>
                    </div>
                </form>
                </div>
                <!--Footer-->
                <div class="modal-footer">
                <div class="options text-right">
                    <p class="pt-1">
                    Already have an account?
                    <a href="#" class="blue-text">Log In</a>
                    </p>
                </div>
                <button
                    type="button"
                    mdbBtn
                    color="info"
                    outline="true"
                    class="ml-auto"
                    data-dismiss="modal"
                    mdbWavesEffect
                >
                    Close
                </button>
                </div>
            </mdb-tab>
            <!--/.Panel 8-->
            </mdb-tabset>
        </div>
        </div>
        <!--/.Content-->
    </div>

I changed position fixed for a position absolute, removed m-0 class.

Please check and tell me if you fix the problem :)

Best, Konrad.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.6.0
  • Device: Surface Pro
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags
dynamic-modal dynamicmodal angular cascading-modal tabs
About author
ewgiddings
164Support score
21Questions 7Answers 0Snippets