As the Title says i'm currently struggeling with the Nebular Dialog in Angular. It is centered by default and i want it to be aligned straight to the right of my screen.
What i tried so far after googling quite a while is to call the dialog in my component.ts like so:
this.dialogRef = this.dialogService.open(this.noteDialog, { dialogClass: 'stick-right' });
and then adding some scss to my themes.scss
.stick-right {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
what this does is some html output as following when inspecting the elements in the Browser (simplified)
<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>
As you can see the dialogClass: 'stick-right' is applied to the second <div>.
So the problem here seems to be that i need the scss applied to the first <div> and not the second.
Anybody got a clue if thats possible from NbDialog itself or having a proper solution that works?
Thanks in advance!
Ok i finally found out myself... I'm really not a friend of jquery but in this case it seems to be the only chance to get this done (until a parent selector will be added to css)...
With this the stick-right class will be added to the div element with class cdk-global-overlay-wrapper
$('.cdk-overlay-pane').closest('.cdk-global-overlay-wrapper').addClass('stick-right');