From 7646f7127a1dbec7d13e78791266f35052464896 Mon Sep 17 00:00:00 2001
From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Sun, 9 Jun 2019 20:57:49 -0700
Subject: [PATCH] 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>
---
.../eg2/src/app/share/combobox/combobox.component.html | 1 +
.../src/app/share/org-select/org-select.component.html | 1 +
.../eg2/src/app/staff/sandbox/sandbox.component.html | 18 ++++++++++++++++++
Open-ILS/src/eg2/src/styles.css | 8 ++++++++
4 files changed, 28 insertions(+)
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 b6099fcae9..0f0afde823 100644
--- 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)="onClick($event)"
(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 cf7b93d80f..d49217c6fb 100644
--- 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 0bba0e517e..4ac22a9e13 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -157,6 +157,7 @@
</div>
<br/><br/>
+
<div>
<h4>Cross-tab communications example</h4>
<p>To test, open this sandbox in a second browser tab. Enter something in the input box below, then switch to the other tab and click anywhere on the page.
@@ -170,6 +171,23 @@
message received: {{sbChannelText}}
</div>
</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">
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 0ffd6b576a..5819e336ba 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -195,3 +195,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;}
--
2.11.0