MudDialog: When content exceeds hight scroll only content, not title …

…and action buttons (MudBlazor#8785)
creed-maxeta · May 6, 2024 · a74a88a · a74a88a
1 parent fdb7151
commit a74a88a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 26 deletions.
diff --git a/src/MudBlazor.Docs/Pages/Components/Dialog/DialogPage.razor b/src/MudBlazor.Docs/Pages/Components/Dialog/DialogPage.razor
@@ -93,7 +93,7 @@
 
         <DocsPageSection>
             <SectionHeader Title="Scrollable Dialog">
-                <Description>Quick example on how to give your dialog scrollable content.</Description>
+                <Description>Quick example on how content that exeeds the available height becomes scrollable.</Description>
             </SectionHeader>
             <SectionContent Codes="@(new[] {new CodeFile("Page.razor", nameof(DialogScrollableExample)), new CodeFile("Dialog.razor", nameof(DialogScrollableExample_Dialog))})">
                 <DialogScrollableExample />

diff --git a/src/MudBlazor.Docs/Pages/Components/Dialog/Examples/DialogScrollableExample_Dialog.razor b/src/MudBlazor.Docs/Pages/Components/Dialog/Examples/DialogScrollableExample_Dialog.razor
@@ -1,17 +1,15 @@
 @namespace MudBlazor.Docs.Examples
 
-<MudDialog Gutters="false">
+<MudDialog Style="height: 400px">
     <DialogContent>
-        <MudContainer Style="max-height: 300px; overflow-y: scroll">
-            @if (_loading)
-            {
-                <MudProgressCircular Indeterminate="true"></MudProgressCircular>
-            }
-            else
-            {
-                <MudText Style="white-space: pre-wrap;">@_licenseText</MudText>
-            }
-        </MudContainer>
+        @if (_loading)
+        {
+            <MudProgressCircular Indeterminate="true"></MudProgressCircular>
+        }
+        else
+        {
+            <MudText Style="white-space: pre-wrap;">@_licenseText</MudText>
+        }
     </DialogContent>
     <DialogActions>
         <MudButton Color="Color.Primary" OnClick="Ok">Accept</MudButton>

diff --git a/src/MudBlazor/Styles/MudBlazor.scss b/src/MudBlazor/Styles/MudBlazor.scss
@@ -30,6 +30,7 @@
 @import 'components/_chip';
 @import 'components/_collapse';
 @import 'components/_dialog';
+@import 'components/_focustrap';
 @import 'components/_field';
 @import 'components/_grid';
 @import 'components/_paper';

diff --git a/src/MudBlazor/Styles/components/_dialog.scss b/src/MudBlazor/Styles/components/_dialog.scss
@@ -97,28 +97,19 @@
     }
   }
 
-  & > .mud-focus-trap {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-
-    & > .mud-focus-trap-child-container {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-    }
-  }
-
   & .mud-dialog-content {
     position: relative;
     flex: 1 1 auto;
-    padding: 8px 24px;
+    overflow: auto;
+    padding: 0px 24px;
+    margin: 8px 0px;
     -webkit-overflow-scrolling: touch;
     border-top-left-radius: var(--mud-default-borderradius);
     border-top-right-radius: var(--mud-default-borderradius);
 
     &.mud-dialog-no-side-padding {
-      padding: 12px 0px;
+      padding: 0px;
+      margin: 12px 0px;
     }
   }
 

diff --git a/src/MudBlazor/Styles/components/_focustrap.scss b/src/MudBlazor/Styles/components/_focustrap.scss
@@ -0,0 +1,7 @@
+.mud-focus-trap {
+  display: contents;
+
+  .mud-focus-trap-child-container {
+    display: contents;
+  }
+}