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");
  *   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 {
 @import '../node_modules/open-iconic/font/css/open-iconic.css';
 
 .app-body {

+    display:-ms-flexbox;

     display:flex;
     display:flex;

-    flex-direction:column;
+    -ms-flex-direction:column;
+        flex-direction:column;

     display: flex;
     flex-direction: column;
     display: flex;
     flex-direction: column;

-    align-items: stretch;
+    -ms-flex-align: stretch;
+        align-items: stretch;

     height: 100%;
 }
 
     height: 100%;
 }
 


@@ -33,16 +36,20 @@
   color: $gray-darkest;
 }
 .lpReactDashboard {
   color: $gray-darkest;
 }
 .lpReactDashboard {

+  display:-ms-flexbox;

   display:flex;
   height:100%;
   .app-body {
     > header {
   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 {
     }
   }
 }
 .lp-react-launch {

+  display: -ms-flexbox;

   display: flex;
 }
 .app-body.create-fleet {
   display: flex;
 }
 .app-body.create-fleet {


@@ -60,9 +67,12 @@
 }
 
 .baseGridCell {
 }
 
 .baseGridCell {

-  align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;

   display: flex;
   display: flex;

-  flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;

   min-height: 30px;
   overflow: hidden;
   padding-left: 2px;
   min-height: 30px;
   overflow: hidden;
   padding-left: 2px;


@@ -72,16 +82,21 @@
 }
 
 .lp_dashboard {
 }
 
 .lp_dashboard {

+  display: -ms-flexbox;

   display: flex;
   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 {
   height: 100%;
 
   /* Network service list styles */
 
   .leftMinimizedNsListPanel {

+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex: 1 100%;
+    -ms-flex: 1 100%;
+        flex: 1 100%;

     height: auto;
     max-width: 30px;
     min-width: 30px;
     height: auto;
     max-width: 30px;
     min-width: 30px;


@@ -89,9 +104,9 @@
       background-color: white;
       display:block;
       h3 {
       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;
 
         padding: 1.5rem 0;
         color: white;
 


@@ -100,11 +115,14 @@
   }
 
   .nsListPanel {
   }
 
   .nsListPanel {

+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex: 1 100%;
+    -ms-flex: 0 1;
+        flex: 0 1;

     height: auto;
     height: auto;

-    max-width: 500px;
-    min-width: 500px;
+    width: auto;
+    /* max-width: 500px;*/
+    /* min-width: 500px;*/

 
     header {
       background-color: white;
 
     header {
       background-color: white;


@@ -112,7 +130,8 @@
     }
 
     &-body {
     }
 
     &-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;
     top:1.5rem;
     right:0.5rem;
     cursor:pointer;

+    display:-ms-flexbox;

     display:flex;
     &:before {
     }
     display:flex;
     &:before {
     }


@@ -130,14 +150,18 @@
 
   .nsListPanelToolbar {
     background-color: $gray;
 
   .nsListPanelToolbar {
     background-color: $gray;

+    display: -ms-flexbox;

     display: flex;
     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;
     padding-left: 1rem;
     .button {
       cursor: pointer;

+      display: -ms-flexbox;

       display: flex;
       display: flex;

-      //flex: 0;
+      /*flex: 0;*/

       margin: 4px;
       margin: 0.5rem;
       img {
       margin: 4px;
       margin: 0.5rem;
       img {


@@ -150,19 +174,25 @@
     }
   }
   .nsList {
     }
   }
   .nsList {

+    display: -ms-flexbox;

     display: flex;
     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: auto;
     padding-left: 0;
     padding-right: 0;
     &-body {

-      overflow-y: scroll;
+      overflow-y: auto;
+      overflow-x: hidden;

     }
   }
   .nsListItemRow {
     }
   }
   .nsListItemRow {

+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-direction: row;
+    -ms-flex-direction: row;
+        flex-direction: row;

   }
   .cellValue {
     overflow: hidden;
   }
   .cellValue {
     overflow: hidden;


@@ -181,9 +211,12 @@
     background-color: $gray;
     border-top: 1px solid $gray-lightest;
     border-bottom: 1px solid $gray-lightest;
     background-color: $gray;
     border-top: 1px solid $gray-lightest;
     border-bottom: 1px solid $gray-lightest;

+    display: -ms-flexbox;

     display: flex;
     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;
   }
   .nsListItemField {
     @extend .baseGridCell;


@@ -229,8 +262,8 @@
 
   .actionButton {
     cursor: pointer;
 
   .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;
   }
 
     margin-top: 5px;
   }
 


@@ -242,10 +275,13 @@
   /* Network service detail card styles */
 
   .nsCardPanel {
   /* Network service detail card styles */
 
   .nsCardPanel {

-    //border: 1px solid black;
+    /*border: 1px solid black;*/
+    display: -ms-flexbox;

     display: flex;
     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;
     height: auto;
     header {
       background-color: white;


@@ -254,9 +290,12 @@
     }
     &-body {
       background-color: $gray;
     }
     &-body {
       background-color: $gray;

+      display: -ms-flexbox;

       display: flex;
       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;
       min-width: 0;
       min-height: 0;
       overflow-y: auto;


@@ -266,6 +305,7 @@
 
   /* Angular wrapping */
   lp-react-dashboard {
 
   /* Angular wrapping */
   lp-react-dashboard {

+    display:-ms-flexbox;

     display:flex;
   }
 }
     display:flex;
   }
 }