Angular NBG Modal appears at the bottom of the screen

I have an Angular app using NgbModal from ng-bootstrap, but the modal appears incorrectly: instead of centering and overlapping the parent, it renders at the bottom of the screen underneath the parent component.

Inspecting the modal’s computed styles in devtools shows it’s missing expected positioning CSS like position: fixed|absolute, top, left, and transform: translate(-50%, -50%), which ng-bootstrap normally applies to center modals.

When inspecting the modal element in the browser devtools, I see that the computed styles do not include any position: fixed|absolute, top, left, or transform: translate(-50%, -50%) rules that it would normally have. The only CSS rules I can find on the modal or its parents are font and margin/padding styles — nothing about positioning.

I suspect that either the modal CSS from ng-bootstrap is missing, not loaded properly, or some other CSS is overriding or removing the positioning styles.

This is the parent:

<button class="add-user-btn" (click)="openNewUserModal(null)">Add User</button>

...

import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
export class UsersComponent implements OnInit {

constructor(
private modalService: NgbModal
) { }

openNewUserModal(user: User | null = null) {
const modalRef = this.modalService.open(UserModalComponent);
}


Child:

<div class="modal-header">
<h4 class="modal-title">User Modal</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
</div>
<div class="modal-body">
Hello, minimal modal!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="activeModal.close('Save click')">Save</button>
</div>


...

import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";

@Component({
selector: 'app-user-modal',
templateUrl: './user-modal.component.html',
styleUrls: ['./user-modal.component.scss']
})
export class UserModalComponent implements OnInit {

constructor(public activeModal: NgbActiveModal) { }

}



There is no custom CSS for the modal right now.

I have confirmed a few things that I have seen suggested elsewhere:

1.) I imported the Angular Material prebuilt theme globally at the top of styles.scss:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";


2.) In my angular.json file my build configuration includes both Angular Material’s and Bootstrap’s CSS files globally:

"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],


This is currently my index.html. I do not believe that I need to do anything here but I have read some answers suggesting trying some things here and I've tried it all only to have other styles messed up so I have not really touched it. I am open to suggestions.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TIMS</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

Continue reading...