CSS | Dropdown view on top of a dialog

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:
image

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.

it doesn’t seem you need help with the curriculum so I am moving your topic to #web-development

1 Like