Dropdown toggle should come up if dropdown data goes out of screen - html

Question

I am using Angular 8,
If we have 20 dropdowns <ul> entries, then dropdown toggle <ul> is going out of the screen.
I need to scroll the whole screen to see all the list of dropdown
Screenshot 1: DropDown that has 15 entries, but here I can see only 7 entries,
If I want to see all 15 entries then I need to scroll whole screen (Screenshot 2)
Screenshot 2: I need to scroll whole scree to see all data,
All I need to scroll only the dropdown till i find the last item or as soon as it goes out of screen, i need that dropdown to up , something like this Screenshot 3
Screenshot 3: I need something like this
#import "~src/assets/styles/bootstrap-theme";
#import "~src/assets/styles/icons";
:host {
form {
position: relative;
&.ng-invalid {
.dropdown-display {
border: $text-border-width solid $common-color-error-red;
background-color: $common-color-error-background;
z-index: 100; // to make sure the dropdown toggle border is drawn over the barcode button border
}
}
}
div.background {
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
div.dropdown.disabled {
.form-control {
background-color: $input-disabled-bg;
}
.input-group-append button, .input-group-append .input-group-text {
background-color: $input-disabled-bg;
}
}
div.dropdown .dropdown-display {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul.dropdown-menu {
max-height: 50vh;
overflow-y: scroll;
z-index: 1040;
-webkit-overflow-scrolling: touch;
}
ul.dropdown-menu > li > a {
&:hover {
color:$common-color-white;
}
&.highlight-selection {
background-color: $highlight-input-background;
color: $highlight-input-text-color;
}
}
ul.dropdown-menu > li > input {
padding: 3px 15px; // px values since this is dependent on bootstrap, which also uses px for this
background-color: white;
}
ul.tags {
width: 100%;
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin-top: 0.5rem;
margin-bottom: 0;
border: $text-border-width solid darken($light-input-background, 5%);
li {
flex: 0 0 auto;
background-color: $light-input-background;
padding: 0.3125rem;
margin: 0.3125rem;
}
}
.input-group-append {
button {
padding-top: 0.0625rem;
padding-bottom: 0;
color: $primary;
background-color: $secondary;
border-color: $secondary;
}
.input-group-text {
background-color: $secondary;
border-color: $secondary;
}
}
}
HTML
<div class="background " *ngIf="showDropdownMenu" (click)="toggleDropdown()"></div>
<div class="dropdown">
<div class="input-group">
<div class="form-control flex-grow-1 dropdown-display"
(click)="toggleDropdownFromMenu($event)">
{{ model.selectedEntry}}
</div>
<div class="input-group-append" *ngIf="model.options.scannable">
<button class="btn btn-secondary"
type="button"
(click)="doScan($event)">
<fa-icon [icon]="faBarcode" size="2x"></fa-icon>
</button>
</div>
<div class="input-group-append"
(click)="toggleDropdownFromMenu($event)">
<fa-icon [icon]="faCaretDown" class="input-group-text"></fa-icon>
</div>
<span class="sr-only">Toggle Dropdown</span>
</div>
<ul class="dropdown-menu " role="menu" [ngClass]="{ show: showDropdownMenu }">
<li role="menuitem">
<input type="text"
formControlName="searchInput"
*ngIf="model.value.length > 3"
(click)="$event.stopPropagation()"
class="form-control"
[placeholder]="strings.searchPlaceholder"
>
</li>
<li role="menuitem"
*ngFor="let entry of searchMatchingEntries">
<a class="dropdown-item"
(click)="onSelected(entry)"
[ngClass]="{'highlight-selection':isSelected(entry)}">{{entry.displayName}}</a>
</li>
</ul>
</div>