Have modal centered in container

[yglodt]

Hi,

I am using angular-modal-gallery in an angular-material based app.

The gallery is used in a component being shown by router-outlet.

The app is structured like this:

<mat-sidenav-container class="sidenav-container">
	<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
		<mat-toolbar color="primary">App Name</mat-toolbar>
		<mat-nav-list>
			<!-- left menu items -->
		</mat-nav-list>
	</mat-sidenav>
	<mat-sidenav-content>
		<mat-toolbar color="primary" style="z-index:10001;"></mat-toolbar>
		<div style="padding:5px;>
			<router-outlet (activate)="onActivate($event)" (deactivate)="onDeactivate($event)"></router-outlet>
		</div>
	</mat-sidenav-content>
</mat-sidenav-container>

The problem I have is that the gallery is centered in the whole document, this way the left navigaton arrow is hidden, and so is the "Close" icon.

Is there a way to tell angular-modal-gallery to center itself in the mat-sidenav-content element?

Here a screenshot of the issue:

[Ks89]

Hi.
Yes this is a well known issue.
There are some open issues about this topic and I scheduled the fix for version 8.0.0

I'll work on this during Christmas holidays.

At the moment there isn't a solution. This is happening because material wins over and higher css z-index.

I close the issue not because I'm not interested to fix it, but because its already scheduled and there is another issue #137

[yglodt]

Thank you for your quick and detailed explanation. Your effort for this component is highly appreciated.