fix dropdown overflow and bar z-index

This commit is contained in:
FrancescoMolinaro
2023-12-27 10:32:03 +01:00
parent 8c6daf744d
commit 24ad516c29
2 changed files with 7 additions and 5 deletions

View File

@@ -251,7 +251,7 @@
<div class="col"> <div class="col">
<div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
ngbDropdown ngbDropdown
placement="bottom-start"> placement="top-start">
<div class="position-relative right-addon" role="combobox"> <div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle" <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i> ngbDropdownToggle></i>
@@ -266,7 +266,7 @@
type="text" type="text"
/> />
<div aria-labelledby="outboundPatternDropdownButton" <div aria-labelledby="outboundPatternDropdownButton"
class="dropdown-menu scrollable-dropdown-menu w-100 " class="dropdown-menu dropdown-menu-top w-100 "
ngbDropdownMenu> ngbDropdownMenu>
<div class="scrollable-menu" role="listbox"> <div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
@@ -355,7 +355,7 @@
<div <div
(click)="addOutboundPattern()" (click)="addOutboundPattern()"
class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }} class="add-pattern-link mb-5">{{ 'ldn-new-service.form.label.addPattern' | translate }}
</div> </div>

View File

@@ -129,13 +129,15 @@ textarea {
bottom: 0; bottom: 0;
background-color: var(--bs-gray-400); background-color: var(--bs-gray-400);
padding: calc(var(--bs-spacer) / 2); 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 { .marked-for-deletion {
background-color: lighten($red, 30%); background-color: lighten($red, 30%);
} }
.dropdown-menu-top, .scrollable-dropdown-menu {
z-index: var(--ds-submission-footer-z-index);
}