LP1832146: Make sure that comboboxes don't get cut off

To test:
1) Go to the sandbox and open the accordion.
2) Open the combobox. Note that it isn't cut off.
3) Go to Administration > Acquisitions Administration
> Exchange Rates.
4) Click New Exchange Rate.
5) Go to the "From Currency" and "To Currency" fields.
6) Note that the dropdowns are visible and not cut off.

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
index 0a5deee..34818cb 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
@@ -18,6 +18,7 @@
     [inputFormatter]="formatDisplayString"
     (click)="click$.next($event.target.value)"
     (blur)="onBlur()"
+    container="body"
     (selectItem)="selectorChanged($event)"
     #instance="ngbTypeahead"/>
   <div class="d-flex flex-column icons" (click)="openMe($event)">

diff --git a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
index cf7b93d..d49217c 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
@@ -21,6 +21,7 @@
     [inputFormatter]="formatter"
     (click)="click$.next($event.target.value)"
     (selectItem)="orgChanged($event)"
+    container="body"
     #instance="ngbTypeahead"
   />
 

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index bed0c82..fb83749 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -126,6 +126,22 @@
 </div>
 <br/><br/>
 
+<ngb-accordion>
+  <ngb-panel title="Open me for comboboxes">
+    <ng-template ngbPanelContent>
+      <eg-org-select></eg-org-select>
+      <eg-combobox>
+        <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records"
+          i18n-entryLabel></eg-combobox-entry>
+        <eg-combobox-entry entryId="auth" entryLabel="Authority Records"
+          i18n-entryLabel></eg-combobox-entry>
+        <eg-combobox-entry entryId="bib-acq" entryLabel="Acquisitions Records"
+          i18n-entryLabel></eg-combobox-entry>
+      </eg-combobox>
+    </ng-template>
+  </ngb-panel>
+</ngb-accordion>
+
 <!-- grid stuff -->
 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
   HELLO {{userContext.hello}}

diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 10424f2..611f517 100644 (file)
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -191,3 +191,11 @@ h5 {font-size: .95rem}
   #eg-print-container pre {border: none}
 }
 
+/**
+ * Make sure that comboboxes (including org select
+ * are visible, even in nested modals.
+ *
+ * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
+ * for the upstream issue that necessitates this.
+ */
+body>.dropdown-menu {z-index: 2100;}