文章/答案/技术大牛

发布

社区首页 >问答首页 >星云对话比对

问星云对话比对
EN

Stack Overflow用户

提问于 2022-01-11 17:39:13

回答 1查看 334关注 0票数 0

正如标题所示，我目前正在与星云对话的角度进行斗争。默认情况下，它是居中的，我希望它直接对齐到我屏幕的右边。

在googling了很长一段时间之后，我尝试的是调用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本身得到线索，或者有一个有效的解决方案？

提前感谢！

html

css

angular

typescript

nebular

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-12 10:37:04

好吧我终于发现自己..。我真的不是jquery的朋友，但在这种情况下，它似乎是完成此操作的唯一机会(直到父选择器被添加到css中为止).

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70671119

复制

相似问题

问星云对话比对
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问星云对话比对EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问星云对话比对
EN