fix react-select clipping problem in dashboard

elastic · Aug 31, 2017 · 10fec13 · 10fec13
1 parent 2ba0a00
commit 10fec13
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/core_plugins/input_control_vis/public/vis.less b/src/core_plugins/input_control_vis/public/vis.less
@@ -7,3 +7,16 @@
     padding: 15px 0;
   }
 }
+
+visualization.input_control_vis {
+  overflow: visible;
+
+  .vis-container {
+    overflow: visible;
+  }
+}
+
+.Select-menu-outer {
+  z-index: 99999 !important; // make sure menu is on top of everything else (leaflet)
+}
+
diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -112,6 +112,10 @@ dashboard-grid {
   i.remove {
     cursor: pointer;
   }
+
+  .gs-w {
+    z-index: auto !important;
+  }
 }
 
 .panel {
@@ -134,6 +138,7 @@ dashboard-grid {
 /**
  * 1. Fix Firefox bug where a value of overflow: hidden will prevent scrolling in a panel where the spy panel does
  * not have enough room.
+ * 2. react-select used in input control vis needs `visible` overflow to avoid clipping selection list
  */
 dashboard-panel {
   flex: 1;
@@ -144,7 +149,8 @@ dashboard-panel {
   background: @dashboard-panel-bg;
   color: @dashboard-panel-color;
   padding: 0;
-  overflow: auto; /* 1 */
+  overflow: visible; /* 1, 2 */
+
   position: relative;
 
   .panel {

diff --git a/src/ui/public/visualize/visualize.html b/src/ui/public/visualize/visualize.html
@@ -10,6 +10,7 @@
 />
 <visualization
   ng-if="editorMode==false"
+  class={{vis.type.name}}
   vis="vis"
   vis-data="visData"
   ui-state="uiState"