Merge pull request #1433 from yaacov/fix-dropdown-cutoff

Fix filter menu dropdown cutoff
ManageIQ · May 25, 2017 · 85fdb53 · 85fdb53
2 parents cb572e0 + 0fee2e3
commit 85fdb53
Showing 1 changed file with 100 additions and 112 deletions.
diff --git a/app/assets/stylesheets/metrics.scss b/app/assets/stylesheets/metrics.scss
@@ -1,90 +1,45 @@
 .miq-metrics {
   overflow-x: hidden;
   overflow-y: hidden;
-
-  i.pficon-trend-up::before {
-    color: #1e4f18;
-    margin-right: 10px;
+  i.pficon-trend-up {
+    &::before {
+      color: #1e4f18;
+      margin-right: 10px;
+    }
   }
-  i.fa-tachometer::before {
-    color: #004368;
-    margin-right: 10px;
+  i.fa-tachometer {
+    &::before {
+      color: #004368;
+      margin-right: 10px;
+    }
   }
-
   #pagination-title {
     font-weight: 700;
     margin-right: 10px;
     margin-left: 10px;
     vertical-align: bottom;
     line-height: 27px;
   }
-
   .ad-hoc-toolbar {
     margin-left: 15px;
   }
   .toolbar-pf {
     border: 0;
   }
-  .graph-view .toolbar-pf .toolbar-pf-actions .form-group {
-    padding-right: 0;
-  }
-  .list-view .toolbar-pf .toolbar-pf-actions .form-group {
-    padding-right: 0;
-    margin-bottom: 0 !important;
-  }
-
-  .ad-hoc-tenant {
-    margin-left: 5px;
-    input {
-      display: inline;
-      width: 190px;
-    }
-
-    button {
-      vertical-align: top;
-      margin-bottom: 10px;
-    }
-
-    .btn {
-      margin-left: 0;
-    }
-  }
-  .form-group.toolbar-pf-filter {
-    margin-bottom: 0;
-  }
-  .form-group.toolbar-actions.ng-scope {
-    margin-bottom: 0;
-  }
-
-  .pagination {
-    display: flex;
-    float: right;
-    margin: 0;
-    margin-bottom: 0;
-  }
-
-  .pagination-div {
-    display: flex;
-    float: right;
-    position: absolute;
-    top: 46px;
-    right: 5px;
-    margin-right: 5px;
-    padding-right: 0;
-    border: 0;
-    .page-input {
-      width: 40px;
-      margin-left: 10px;
-      margin-right: 10px;
-      text-align: right;
-    }
-  }
-
   .graph-view {
+    .toolbar-pf {
+      .toolbar-pf-actions {
+        .form-group {
+          padding-right: 0;
+        }
+      }
+    }
     overflow-x: hidden;
     overflow-y: hidden;
-    .bootstrap-select.btn-group .dropdown-menu {
-      margin-left: 5px;
+    .bootstrap-select.btn-group {
+      .dropdown-menu {
+        margin-left: 5px;
+      }
     }
     .form-group.toolbar-actions.ng-scope {
       margin-bottom: 10px;
@@ -95,52 +50,49 @@
       }
     }
   }
-
-  .list-view-container {
-    padding-top: 10px;
-    margin-bottom: 0;
-  }
-  .line-chart {
-    margin-top: 36px;
-    margin-left: 30px;
-    margin-right: 50px;
-    margin-bottom: 0;
-  }
-
-  .blank-slate-pf {
-    margin-bottom: 0;
-  }
-
   .list-view {
+    .toolbar-pf {
+      .toolbar-pf-actions {
+        .form-group {
+          padding-right: 0;
+          margin-bottom: 0 !important;
+        }
+      }
+      .form-group {
+        padding-right: 0;
+        .btn-group {
+          margin-left: 0;
+        }
+        .btn {
+          margin-left: 0;
+        }
+      }
+    }
     overflow-x: hidden;
     overflow-y: hidden;
-
     label {
       font-weight: 500;
       font-size: 14px;
       color: #004368;
     }
-
-    .toolbar-pf-results .list-inline {
-      margin-left: 2px;
+    .toolbar-pf-results {
+      .list-inline {
+        margin-left: 2px;
+      }
     }
-
     .tooltip-inner {
       padding: 0;
       padding-right: 10px;
-      padding-left: 10px
+      padding-left: 10px;
     }
-
     .list-view-pf-expand-active {
       border: 0;
       border-top: 1px solid #39a5dc;
       border-bottom: 1px solid #39a5dc;
     }
-
     .list-group.list-view-pf.list-view-pf-view {
       margin-top: 5px;
     }
-
     .list-group-item-container {
       margin-top: 10px;
       padding: 15px;
@@ -165,62 +117,98 @@
         width: 410px;
       }
     }
-    .toolbar-pf {
-      .form-group {
-        padding-right: 0;
-
-        .btn-group {
-          margin-left: 0;
-        }
-        .btn {
-          margin-left: 0;
-        }
-      }
+  }
+  .ad-hoc-tenant {
+    margin-left: 5px;
+    input {
+      display: inline;
+      width: 190px;
     }
+    button {
+      vertical-align: top;
+      margin-bottom: 10px;
+    }
+    .btn {
+      margin-left: 0;
+    }
+  }
+  .form-group.toolbar-pf-filter {
+    margin-bottom: 0;
+  }
+  .form-group.toolbar-actions.ng-scope {
+    margin-bottom: 0;
+  }
+  .pagination {
+    display: flex;
+    float: right;
+    margin: 0;
+    margin-bottom: 0;
+  }
+  .pagination-div {
+    display: flex;
+    float: right;
+    position: absolute;
+    top: 46px;
+    right: 5px;
+    margin-right: 5px;
+    padding-right: 0;
+    border: 0;
+    .page-input {
+      width: 40px;
+      margin-left: 10px;
+      margin-right: 10px;
+      text-align: right;
+    }
+  }
+  .list-view-container {
+    min-height: calc(100vh - 353px);
+    padding-top: 10px;
+    margin-bottom: 0;
+  }
+  .line-chart {
+    min-height: calc(100vh - 347px);
+    margin-top: 36px;
+    margin-left: 30px;
+    margin-right: 50px;
+    margin-bottom: 0;
+  }
+  .blank-slate-pf {
+    min-height: calc(100vh - 353px);
+    margin-bottom: 0;
   }
-
   .timeline-date-input {
     width: 300px;
   }
-
   .list-group {
     border-top: none;
   }
-
   .bootstrap-touchspin {
     text-align: center;
   }
-
   .tenant-filter-bar {
     margin-left: 0;
     .dropdown-menu.open {
       margin-top: -11px;
     }
   }
-
   .timeline-stepper {
     margin-left: 5px;
   }
-
   .toolbar-pf-include-actions.ng-scope {
     margin-left: 10px;
     width: 100%;
   }
-
   .toolbar-pf-actions.ng-pristine.ng-valid.no-filter-results {
     margin-bottom: 0;
   }
-
   .btn.btn-default.dropdown-toggle.filter-fields {
     min-width: 100px;
   }
-
   .filters-selector {
     .btn {
       margin-left: 0;
     }
   }
-
   .tenants-selector {
     .btn {
       margin-left: 0;