DashboardGrid: Fixed flickering while resizing (#21221)

6c2375e4 · Torkel Ödegaard · GitHub · 5addf9fa · 6c2375e4
Commit 6c2375e4 authored Dec 21, 2019 by Torkel Ödegaard Committed by GitHub Dec 21, 2019
Hide whitespace changes
Inline Side-by-side

Showing with 4 additions and 3 deletions

public/sass/components/_dashboard_grid.scss
+4 -3

No files found.
--- a/public/sass/components/_dashboard_grid.scss
+++ b/public/sass/components/_dashboard_grid.scss
@@ -2,13 +2,14 @@
 @import '~react-resizable/css/styles.css';

 .react-resizable-handle {
-  display: none;
+  // this needs to use visibility and not display none in order not to cause resize flickering
+  visibility: hidden;
 }

 .react-grid-item {
  &:hover {
    .react-resizable-handle {
-      display: initial;
+      visibility: visible;
    }
  }
 }
@@ -47,7 +48,7 @@
  }

  .react-resizable-handle {
-    display: none !important;
+    display: none;
  }

  // the react-grid has a height transition