Search code examples
blazormudblazor

MudDialog with FullScreen, MudAppBar and scrollable content

I would like to create a dialog

  • FullScreen
  • At the top fixed MudAppBar
  • Content shall be scrollable

Here is how I solved: https://try.mudblazor.com/snippet/cOGHkJkUJApPdTVd The issue is for the last element is kinda cut/overlapped I have tried to add bottom margin but did not work.

Solution

  • You can set max-height to calc(100vh - (var(--mud-appbar-height) + 16px)) with 16px is of margin-top you set but I suggest you set 32px so it looks better. Here is the code of MudStack:

    <MudStack Style="max-height: calc(100vh - (var(--mud-appbar-height) + 32px)); height: auto;  overflow-y: scroll;margin-top:32px;" >