星云对话框对齐

Question

正如标题所说，我目前正在为 Angular 中的 Nebular Dialog 而苦苦挣扎。它默认居中，我希望它直接对齐到我的屏幕右侧。

在谷歌搜索了一段时间后，我到目前为止尝试的是在 component.ts 中调用对话框，如下所示：

this.dialogRef = this.dialogService.open(this.noteDialog, { dialogClass: 'stick-right' });

然后向我的 themes.scss

添加一些 scss

.stick-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

它所做的是在检查浏览器中的元素时的一些 html 输出（简化）

<div class="cdk-global-overlay-wrapper" style="justify-content: center; align-items: center;">
    <div class="cdk-overlay-pane stick-right" style="position: static;">
        <app-notes></app-notes>
    </div>
</div>

如您所见，dialogClass: 'stick-right' 应用于第二个 <div>。所以这里的问题似乎是我需要将 scss 应用于第一个 <div> 而不是第二个

有人从 NbDialog 本身或有合适的解决方案中得到线索吗？

提前致谢！

Answer 1

好吧，我终于找到了自己...... 我真的不是 jquery 的朋友，但在这种情况下，这似乎是完成此操作的唯一机会（直到将父选择器添加到 css）...

有了这个 stick-right class 将被添加到 div 元素 class cdk-global-overlay-wrapper

$('.cdk-overlay-pane').closest('.cdk-global-overlay-wrapper').addClass('stick-right');

星云对话框对齐

Nebular Dialog Alignment

html

css

typescript

angular

nebular