search

SamProf / MatBlazor

Material Design components for Blazor and Razor Components
http://www.matblazor.com
MIT License
2.84k stars 386 forks source link

MatSelectItem inside modal shows item on the wrong z-layer #844

Open IIARROWS opened 3 years ago

IIARROWS commented 3 years ago

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 image

Found in version 2.8.0

IIARROWS commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 GitHubhttps://github.com/SamProf/MatBlazor/issues/844#issuecomment-776796532, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADRF2ROQQP5FSHAW2YELCSDS6KRTJANCNFSM4XJSDBKA.

Christian-Oleson commented 3 years ago

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