Looking for a solution to a UX issue with my Angular ng-bootstrap modal. The problem arises when displaying messages of varying lengths - if the message is longer than the screen's vertical resolution, it gets centered on the screen. This causes inconvenience as users have to scroll back to the top to read lengthy messages.
I've tried changing the 'centered' property of the modal to false, but to no avail. I suspect there might be a CSS fix for this, so I experimented with the 'modalDialogClass' setting and a custom class, but nothing seemed to work. I'm stuck and would appreciate any guidance on how to tackle this issue.
This snippet shows how I call the open method on the modal in Angular:
this.currentDialog = this.modalService.open(MessageDetailComponent, { backdrop: 'static', modalDialogClass: 'modalPositioning' });this.currentDialog.componentInstance.msgDetail = this.message;I'm considering including CSS styles inline like the example below, but I'm unsure about the specifics of the CSS code:
@Component({
styles: ['modalPositioning { top: 0 }]})