fix(ModelessOverlay): allow vertical scrolling (#796)

Author: cben

packages/patternfly-3/patternfly-react/less/modeless-overlay.less

@@ -6,6 +6,13 @@
 
     .modal-content {
       height: ~'calc(100vh - @{navbar-pf-height})';
+      display: flex;
+      flex-direction: column;
+
+      .modal-body {
+        flex-grow: 1;
+        overflow: hidden auto;
+      }
     }
   }
 

packages/patternfly-3/patternfly-react/sass/patternfly-react/_modeless-overlay.scss

@@ -6,6 +6,13 @@
 
     .modal-content {
       height: calc(100vh - #{$navbar-pf-height});
+      display: flex;
+      flex-direction: column;
+
+      .modal-body {
+        flex-grow: 1;
+        overflow: hidden auto;
+      }
     }
   }
 

packages/patternfly-3/patternfly-react/src/components/Modal/__mocks__/mockModalManager.js

@@ -49,6 +49,30 @@ export class MockModalManager extends React.Component {
             <input type="text" id="textInput3" className="form-control" />
           </div>
         </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput4">
+            Field Four
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput5">
+            Field Five
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput6">
+            Field Six
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
       </form>
     );
 

packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__mocks__/mockModelessManager.js

@@ -43,6 +43,30 @@ export class MockModelessManager extends React.Component {
             <input type="text" id="textInput3" className="form-control" />
           </div>
         </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput4">
+            Field Four
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput5">
+            Field Five
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput6">
+            Field Six
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
       </form>
     );