星云对话框对齐答案

【问题标题】：Nebular Dialog Alignment星云对话框对齐
【发布时间】：2022-01-12 18:37:04
【问题描述】：

正如标题所说，我目前正在努力使用 Angular 中的 Nebular Dialog。它默认居中，我希望它直接对齐到我的屏幕右侧。

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

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

然后将一些 scss 添加到我的themes.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 本身是否有可能或有一个可行的适当解决方案？

提前致谢！

【问题讨论】：

标签： html css angular typescript nebular

【解决方案1】：

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

这样stick-right 类将被添加到类cdk-global-overlay-wrapper 的div 元素中

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

【讨论】：