如何阻止 ng-bootstrap modal 自动居中模态内容？

Question

我有一个 Angular ng-bootstrap 模式，用于显示不确定长度的消息。我的问题是，每当一条消息比屏幕的垂直分辨率长时，消息就会在屏幕上居中，这对于非常长的消息来说是一个用户体验问题，用户必须一直滚动到消息的顶部才能看到阅读它。

我已尝试将模式的 centered 属性显式设置为 false，但它不会改变行为。我怀疑有一个 CSS 解决方案，我已经使用了 modalDialogClass 设置和自定义类，但似乎无法改变任何东西。我不知道如何解决这个问题，希望能提供任何帮助。

这是我在模式上调用 open 的 Angular 代码：

this.currentDialog = this.modalService.open(MessageDetailComponent, { backdrop: 'static', modalDialogClass: 'modalPositioning' });

this.currentDialog.componentInstance.msgDetail = this.message;

我也在考虑像下面这样内联调用 CSS 样式，但不知道从哪里开始使用实际的 CSS：

@Component({

styles: ['modalPositioning { top: 0 }]

})

Answer 1

在阅读了 Bootstrap 关于模态的文档后，我找到了解决方案。 ng-bootstrap 提供了一个名为 'scrollable' 的选项，默认设置为 false。将其设置为 true 会将长内容设置到屏幕顶部，而不是在屏幕中居中。