CSS - how to place a dropdown on top of a dialog ?

Redan Hassoun — Tue, 14 Apr 2020 11:03:14 +0000

Hi,
I am quite new in 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.

The issue is, when I open this drop-down, it appears "inside" the dialog:

How can I make this drop-down to appear in front 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.

DEV Community: Redan Hassoun

CSS - how to place a dropdown on top of a dialog ?