Topic: mdbootstrap Select Option list appear at back on modal form

yuenkai free asked 3 years ago

Expected behaviorenter image description hereActual behaviorenter image description hereResources (screenshots, code snippets etc.)


i showing modal form with select component. i get option list from service.When 1st click to show the modal form, select component behave properly, but subsequent click to show the modal form, select option list render behind the form.i don't have any custom CSS and I don't know what happen.Please someone help me?


AssignClick(Selected: ActiveOrderDtoSimple) { let selectionOption: SelectionOption[] = [];

        (reply: BaseResponseWithData<UserWithRole[]>) => {
            reply.Data.forEach((element) => {
                selectionOption.push({ value: element.UserId, label: element.DisplayName });

            this.mdbModalRef =, {
                data: {
                    title: 'Select Driver',
                    placeholder: 'Select Driver',
                    selectionOption: selectionOption,

            this.mdbModalRef.content.Result.subscribe((result: any) => {
                if (result) {
                    this.orderService.AssignToPickup(Selected.Id, result).subscribe(
                        (reply: BaseResponseWithData<OrderDto>) => {
                            if (reply.Success) {
                                //Remove record from array
                                    this.ActiveElements.findIndex((x) => x.Id === Selected.Id),
                        (error) => {
                            console.log('Network Error');
        (error) => {}


<mdb-card class="rounded-top">
    <mdb-card-header class="text-white WeBg">
        {{ title }}
        <mdb-select-2 [outline]="true" [formControl]="selectControl">
            <mdb-select-option *ngFor="let option of selectionOption2" [value]="option.value">{{ option.label }}</mdb-select-option>
        <div class="d-flex justify-content-center">
            <button mdbBtn class="white-text waves-light WeBg" (click)="onCancelClicked()" mdbWavesEffect>Cancel</button>
            <button mdbBtn class="white-text waves-light WeBg" (click)="onOKClicked()" mdbWavesEffect>OK</button>

Arkadiusz Idzikowski staff commented 3 years ago

Please include the HTML code, so we can reproduce this problem on our end.

yuenkai free commented 3 years ago

update post to included HTML Code

Arkadiusz Idzikowski staff answered 3 years ago

Please try to add this CSS rule to your global styles.scss file. It should resolve the problem for now, we will add this fix to the package in the next update.

.cdk-overlay-container {
  z-index: 1051 !important;

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.4.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No