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: [email protected] Inviato: 10 Febbraio 2021 16:35 A: [email protected] Rispondi a: [email protected] Cc: [email protected]; [email protected] 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 GitHubhttps://github.com/SamProf/MatBlazor/issues/844#issuecomment-776796532, or unsubscribehttps://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.