Fix #2081 Feature grid style messed up on Firefox and EDGE

web/client/components/layout/BorderLayout.jsx

@@ -19,22 +19,23 @@ const React = require('react');
  *  /></BorderLayout>
  *
  */
-module.exports = ({children, header, footer, columns}) =>
+module.exports = ({children, header, footer, columns, height}) =>
     (<div style={{
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        height: "100%"
+        height: "100%",
+        overflow: "hidden"
         }}>
         {header}
         <div className={"ms2-border-layout-body"} style={{
             display: "flex",
             flex: 1
             }}>
             <main className="ms2-border-layout-content" style={{flex: 1}}>
-                {children}
+                {height ? <div style={{height}}>{children}</div> : children}
             </main>
-            {columns}
+            {height ? <div style={{height}}>{columns}</div> : columns}
         </div>
         {footer}
     </div>);

web/client/plugins/FeatureEditor.jsx

@@ -20,6 +20,7 @@ const BorderLayout = require('../components/layout/BorderLayout');
 const EMPTY_ARR = [];
 const EMPTY_OBJ = {};
 const {gridTools, gridEvents, pageEvents, toolbarEvents} = require('./featuregrid/index');
+const ContainerDimensions = require('react-container-dimensions').default;
 
 const FeatureDock = (props = {
     tools: EMPTY_OBJ,
@@ -40,8 +41,12 @@ const FeatureDock = (props = {
     // columns={[<aside style={{backgroundColor: "red", flex: "0 0 12em"}}>column-selector</aside>]}
     return (<Dock {...dockProps} >
         {props.open &&
+        <ContainerDimensions>
+        { ({ height }) =>
+            // added height to solve resize issue in firefox, edge and ie
         <BorderLayout
             key={"feature-grid-container"}
+            height={height - (62 + 32)}
             header={getHeader()}
             columns={getPanels(props.tools)}
             footer={getFooter(props)}>
@@ -59,8 +64,11 @@ const FeatureDock = (props = {
                 describeFeatureType={props.describe}
                 features={props.features}
                 minHeight={600}
-                tools={props.gridTools}
-         /></BorderLayout>}
+                tools={props.gridTools}/>
+        </BorderLayout> }
+
+        </ContainerDimensions>
+        }
     </Dock>);
 };
 const selector = createSelector(

web/client/plugins/featuregrid/panels/index.jsx

@@ -79,7 +79,7 @@ const dialogs = {
 };
 const panelDefaultProperties = {
     settings: {
-        style: { padding: '0 12px', overflow: "auto", flex: "0 0 14em", boxShadow: "inset 0px 0px 10px rgba(0, 0, 0, 0.4)"}
+        style: { padding: '0 12px', overflow: "auto", flex: "0 0 14em", boxShadow: "inset 0px 0px 10px rgba(0, 0, 0, 0.4)", height: "100%", minWidth: 195}
     }
 };
 

web/client/themes/default/less/react-data-grid.less

@@ -127,3 +127,43 @@
     }
 
 }
+
+.data-grid-top-toolbar {
+    height: 62px;
+    overflow: hidden;
+}
+
+.data-grid-bottom-toolbar {
+    background-color: @ms2-color-background;
+    z-index: 1;
+    height: 32px;
+    overflow: hidden;
+}
+
+@media all and (max-width: 1024px) {
+    .data-grid-bottom-toolbar .col-md-3 {
+        width: 0;
+        display: none;
+    }
+
+    .data-grid-bottom-toolbar .col-md-6 {
+        width: 100%;
+    }
+
+    .data-grid-top-toolbar > .flex-center .col-xs-4:nth-child(1) {
+        width: ~"calc(100% - @{square-btn-size})";
+        padding: 0;
+        margin-left: 5px;
+    }
+
+    .data-grid-top-toolbar > .flex-center .col-xs-4:nth-child(2) {
+        width: 0;
+        display: none;
+    }
+
+    .data-grid-top-toolbar > .flex-center .col-xs-4:nth-child(3) {
+        width: @square-btn-size + 10;
+        padding: 0;
+        margin-right: 5px;
+    }
+}