Hi,
I am quite new to CSS, and I am building an Angular application, on which I have a dialog popup for creating a Quiz. Inside that dialog, I have a form for providing the Quiz details,
One of these details is the list of the users to assign the Quiz to:
In order to do this, I am using ng-bootstrap
<div id="user-selection-container" ngbDropdown>
<button class="btn btn-outline-primary" ngbDropdownToggle>{{ getUserSelectionButtonText() }}</button>
<div id="user-selection-dropdown" ngbDropdownMenu>
<app-users-chooser (selectedUsersChanged)="updateSelectedUsers($event)"></app-users-chooser>
</div>
</div>
The “app-users-chooser” is a component that displays the list of users to choose from, and emitts user objects when the selection changes.
The issue is, when I open this drop-down, it appears “inside” the dialog:
Which makes it annoying for the user to perform his selection.
How can I make this drop-down to appear in from of everything?
I tried to change the z-index, but it did not help.
And maybe there is a better way to achieve this (instead of ng-bootstrap elements)?
I would be glad for any help\suggestions.