MatSelectItem inside modal shows item on the wrong z-layer

[IIARROWS]

Placing a MatSelectItem inside a modal dialog (bootstrap) and clicking on it, the options are hidden and covered by the modal itself (default z-index: 1050).

I tried using BlazorFiddle, but it works well there, but it also produces a different layout for the items list, nesting HTML directly inside of the control instead of the bottom of the page.
https://blazorfiddle.com/s/vxsjs8zg

Screenshots

Found in version 2.8.0

[IIARROWS]

I would like to understand why the difference with blazorfiddle, I guess it's using an older version?
This could help understand the issue, which could be resolved just by changing z-index property of .mdc-menu-surface from 8 to something higher then 1050 (I cannot confirm a safe value).

[wa1gon]

I am having the same issue. I am using Blazored.Modal.

How does one change the z-index on .mdb-menu-surface and where?

[IIARROWS]

Well, I overridden the rule with z-index: 1100!important as a workaround in my CSS, but it's a workaround. It should be fixed, I won't do it unless it's clear there is not a conflict with another z-index rule. Da: notifications@github.com Inviato: 10 Febbraio 2021 16:35 A: MatBlazor@noreply.github.com Rispondi a: reply@reply.github.com Cc: II_ARROWS@hotmail.it; author@noreply.github.com Oggetto: Re: [SamProf/MatBlazor] MatSelectItem inside modal shows item on the wrong z-layer (#844) I am having the same issue. I am using Blazored.Modal. How does one change the z-index on .mdb-menu-surface and where? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#844 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADRF2ROQQP5FSHAW2YELCSDS6KRTJANCNFSM4XJSDBKA>.

[Christian-Oleson]

@IIARROWS ,
MatBlazor and Bootstrap should not be used together. Material Design and Bootstrap are competing design paradigms, and they don't play well together.