LP1832146: Make sure that comboboxes don't get cut off
authorJane Sandberg <sandbej@linnbenton.edu>
Mon, 10 Jun 2019 03:57:49 +0000 (20:57 -0700)
committerGalen Charlton <gmc@equinoxinitiative.org>
Thu, 1 Aug 2019 14:31:32 +0000 (10:31 -0400)
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>
Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
Open-ILS/src/eg2/src/styles.css

index b6099fc..0f0afde 100644 (file)
@@ -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)">
index cf7b93d..d49217c 100644 (file)
@@ -21,6 +21,7 @@
     [inputFormatter]="formatter"
     (click)="click$.next($event.target.value)"
     (selectItem)="orgChanged($event)"
+    container="body"
     #instance="ngbTypeahead"
   />
 
index 0bba0e5..4ac22a9 100644 (file)
 </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. 
     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">
index 0ffd6b5..5819e33 100644 (file)
@@ -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;}