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

redallen · Nov 6, 2018 · 93ed571 · 93ed571
1 parent 3400a44
commit 93ed571
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/packages/patternfly-3/patternfly-react/less/modeless-overlay.less b/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;
+      }
     }
   }
 

diff --git a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_modeless-overlay.scss b/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;
+      }
     }
   }
 

diff --git a/packages/patternfly-3/patternfly-react/src/components/Modal/__mocks__/mockModalManager.js b/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>
     );
 

diff --git a/...ernfly-3/patternfly-react/src/components/ModelessOverlay/__mocks__/mockModelessManager.js b/...ernfly-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>
     );