RIFT-14416: Fixed disappearing scroll bar issue

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>

diff --git a/skyquake/plugins/launchpad/src/launchpad.scss b/skyquake/plugins/launchpad/src/launchpad.scss
index 4ef6d1c..927727a 100644 (file)
--- a/skyquake/plugins/launchpad/src/launchpad.scss
+++ b/skyquake/plugins/launchpad/src/launchpad.scss
@@ -1,6 +1,6 @@
 
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,11 +21,14 @@
 @import '../node_modules/open-iconic/font/css/open-iconic.css';
 
 .app-body {
+    display:-ms-flexbox;
     display:flex;
-    flex-direction:column;
+    -ms-flex-direction:column;
+        flex-direction:column;
     display: flex;
     flex-direction: column;
-    align-items: stretch;
+    -ms-flex-align: stretch;
+        align-items: stretch;
     height: 100%;
 }
 
@@ -33,16 +36,20 @@
   color: $gray-darkest;
 }
 .lpReactDashboard {
+  display:-ms-flexbox;
   display:flex;
   height:100%;
   .app-body {
     > header {
-      flex: 0 1 auto;
-      flex-shrink: 0;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
     }
   }
 }
 .lp-react-launch {
+  display: -ms-flexbox;
   display: flex;
 }
 .app-body.create-fleet {
@@ -60,9 +67,12 @@
 }
 
 .baseGridCell {
-  align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
   display: flex;
-  flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
   min-height: 30px;
   overflow: hidden;
   padding-left: 2px;
@@ -72,16 +82,21 @@
 }
 
 .lp_dashboard {
+  display: -ms-flexbox;
   display: flex;
-  flex: 1;
-  flex-direction: row;
+  -ms-flex: 1;
+      flex: 1;
+  -ms-flex-direction: row;
+      flex-direction: row;
   height: 100%;
 
   /* Network service list styles */
 
   .leftMinimizedNsListPanel {
+    display: -ms-flexbox;
     display: flex;
-    flex: 1 100%;
+    -ms-flex: 1 100%;
+        flex: 1 100%;
     height: auto;
     max-width: 30px;
     min-width: 30px;
@@ -89,9 +104,9 @@
       background-color: white;
       display:block;
       h3 {
-        // vertical | horizontal
-        // top | horizonal | bottom
-        // top right bottom left
+        /* vertical | horizontal*/
+        /* top | horizonal | bottom*/
+        /* top right bottom left*/
         padding: 1.5rem 0;
         color: white;
 
@@ -100,11 +115,14 @@
   }
 
   .nsListPanel {
+    display: -ms-flexbox;
     display: flex;
-    flex: 1 100%;
+    -ms-flex: 0 1;
+        flex: 0 1;
     height: auto;
-    max-width: 500px;
-    min-width: 500px;
+    width: auto;
+    /* max-width: 500px;*/
+    /* min-width: 500px;*/
 
     header {
       background-color: white;
@@ -112,7 +130,8 @@
     }
 
     &-body {
-      flex-flow: col wrap;
+      -ms-flex-flow: col wrap;
+          flex-flow: col wrap;
     }
   }
 
@@ -121,6 +140,7 @@
     top:1.5rem;
     right:0.5rem;
     cursor:pointer;
+    display:-ms-flexbox;
     display:flex;
     &:before {
     }
@@ -130,14 +150,18 @@
 
   .nsListPanelToolbar {
     background-color: $gray;
+    display: -ms-flexbox;
     display: flex;
-    flex: 0 0 auto;
-    flex-direction: row;
+    -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+    -ms-flex-direction: row;
+        flex-direction: row;
     padding-left: 1rem;
     .button {
       cursor: pointer;
+      display: -ms-flexbox;
       display: flex;
-      //flex: 0;
+      /*flex: 0;*/
       margin: 4px;
       margin: 0.5rem;
       img {
@@ -150,19 +174,25 @@
     }
   }
   .nsList {
+    display: -ms-flexbox;
     display: flex;
-    flex: 1;
-    flex-direction: column;
+    -ms-flex: 1;
+        flex: 1;
+    -ms-flex-direction: column;
+        flex-direction: column;
     overflow: auto;
     padding-left: 0;
     padding-right: 0;
     &-body {
-      overflow-y: scroll;
+      overflow-y: auto;
+      overflow-x: hidden;
     }
   }
   .nsListItemRow {
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: row;
+    -ms-flex-direction: row;
+        flex-direction: row;
   }
   .cellValue {
     overflow: hidden;
@@ -181,9 +211,12 @@
     background-color: $gray;
     border-top: 1px solid $gray-lightest;
     border-bottom: 1px solid $gray-lightest;
+    display: -ms-flexbox;
     display: flex;
-    flex: 0 0 auto;
-    flex-direction: row;
+    -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+    -ms-flex-direction: row;
+        flex-direction: row;
   }
   .nsListItemField {
     @extend .baseGridCell;
@@ -229,8 +262,8 @@
 
   .actionButton {
     cursor: pointer;
-    // margin-top is a hack to fix the top of the glyph from
-    // being chopped off
+    /* margin-top is a hack to fix the top of the glyph from*/
+    /* being chopped off*/
     margin-top: 5px;
   }
 
@@ -242,10 +275,13 @@
   /* Network service detail card styles */
 
   .nsCardPanel {
-    //border: 1px solid black;
+    /*border: 1px solid black;*/
+    display: -ms-flexbox;
     display: flex;
-    flex: 1 1 auto;
-    flex-wrap: nowrap;
+    -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+    -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
     height: auto;
     header {
       background-color: white;
@@ -254,9 +290,12 @@
     }
     &-body {
       background-color: $gray;
+      display: -ms-flexbox;
       display: flex;
-      flex: 1;
-      flex-direction: row;
+      -ms-flex: 1;
+          flex: 1;
+      -ms-flex-direction: row;
+          flex-direction: row;
       min-width: 0;
       min-height: 0;
       overflow-y: auto;
@@ -266,6 +305,7 @@
 
   /* Angular wrapping */
   lp-react-dashboard {
+    display:-ms-flexbox;
     display:flex;
   }
 }