Splitter mask added during resize to avoid problems with frames

radzenhq · Mar 12, 2024 · 02076b6 · 02076b6
1 parent a6e16ad
commit 02076b6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/Radzen.Blazor/RadzenSplitter.razor.cs b/Radzen.Blazor/RadzenSplitter.razor.cs
@@ -128,6 +128,8 @@ public async Task OnPaneResizing()
         {
             IsResizing = true;
 
+            StateHasChanged();
+
             await Task.CompletedTask;
         }
 

diff --git a/Radzen.Blazor/RadzenSplitterPane.razor b/Radzen.Blazor/RadzenSplitterPane.razor
@@ -6,6 +6,10 @@
 {
     <div id="@GetId()" @attributes="Attributes" class="@GetComponentCssClass()" style="flex-basis: @Size; @Style" data-index="@Index">
         @ChildContent
+        @if (Splitter.IsResizing)
+        {
+            <div class="rz-splitter-mask" />
+        }
     </div>
 
 

diff --git a/Radzen.Blazor/themes/components/blazor/_splitter.scss b/Radzen.Blazor/themes/components/blazor/_splitter.scss
@@ -156,3 +156,12 @@ $splitter-bar-hover-opacity: 1 !default;
         }
     }
 }
+
+.rz-splitter-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}