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