Merged in CST-12766-porting-from-part-2 (pull request #1202)

fix dropdown overflow and bar z-index Approved-by: Stefano Maffei
DSpace · Jan 11, 2024 · f20f6a7 · f20f6a7
2 parents dfe4b15 + 7e25384
commit f20f6a7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
@@ -109,7 +109,7 @@ <h2 class="flex-grow-1">{{ isNewService ? ('ldn-create-service.title' | translat
             <div class="col">
               <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
                    id="additionalInboundPattern{{i}}"
-                   ngbDropdown placement="bottom-start">
+                   ngbDropdown placement="top-start">
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                      ngbDropdownToggle></i>
@@ -124,7 +124,7 @@ <h2 class="flex-grow-1">{{ isNewService ? ('ldn-create-service.title' | translat
                     type="text"
                   />
                   <div aria-labelledby="inboundPatternDropdownButton"
-                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       class="dropdown-menu dropdown-menu-top w-100 "
                        ngbDropdownMenu>
                     <div class="scrollable-menu" role="listbox">
                       <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
@@ -147,7 +147,7 @@ <h2 class="flex-grow-1">{{ isNewService ? ('ldn-create-service.title' | translat
               <ng-container
                 *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
                 <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                     placement="bottom-start">
+                     placement="top-start">
                   <div class="position-relative right-addon" role="combobox">
                     <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                        ngbDropdownToggle></i>

diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
@@ -129,13 +129,15 @@ textarea {
   bottom: 0;
   background-color: var(--bs-gray-400);
   padding: calc(var(--bs-spacer) / 2);
-  z-index: var(--ds-submission-footer-z-index);
+  z-index: calc(var(--ds-submission-footer-z-index) + 1);
 }
 
 .marked-for-deletion {
   background-color: lighten($red, 30%);
 }
 
-
+.dropdown-menu-top, .scrollable-dropdown-menu  {
+  z-index: var(--ds-submission-footer-z-index);
+}