LP#1846042: take advantage of ngbDropdown container="body"

This feature, which is available as of ng-bootstrap 4.1.0,
allows the grid filter control columns to stay alligned with
the column label and data on small viewports and/or tables
with lots of columns.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Michele Morgan <mmorgan@noblenet.org>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
index 964d6b3..4e85407 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
@@ -40,7 +40,7 @@
   <div [ngSwitch]="col.datatype">
     <div *ngSwitchCase="'link'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -61,7 +61,7 @@
     </div>
     <div *ngSwitchCase="'bool'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -84,7 +84,7 @@
     </div>
     <div *ngSwitchCase="'text'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -123,7 +123,7 @@
     </div>
     <div *ngSwitchCase="'int'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -147,7 +147,7 @@
     </div>
     <div *ngSwitchCase="'id'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -171,7 +171,7 @@
     </div>
     <div *ngSwitchCase="'float'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -195,7 +195,7 @@
     </div>
     <div *ngSwitchCase="'money'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -222,7 +222,7 @@
         <!-- [autoClose]="false" because editing the date widgets, which open
              their open popups, registers to the dropdown as clicking 
              outside the dropdown -->
-        <div ngbDropdown class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
@@ -264,7 +264,7 @@
     </div>
     <div *ngSwitchCase="'org_unit'">
       <div class="input-group">
-        <div ngbDropdown class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
             <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
index 15b4adb..5f2fa0d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -142,7 +142,6 @@
 }
 
 .eg-grid-filter-control-cell {
-  overflow: visible !important;
   white-space: normal;
 }
 .eg-grid-col-is-filtered {