overlay issue in material template

[momopaper]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[x] Support request

Current behavior

I am having an overlay issue over here, i think picture speak faster and clearer

as you can see, the side bar and top navigation bar overlapping the backdrop and image, the close button even hiding behind the top nav bar

Expected behavior

This result is exactly what I expected.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment (the most important section to fill very carefully)

- Node version: X.X.X  
- npm version: X.X.X  
- Operating System and version:  
- Angular version: X.Y.Z 
- angular-cli version (or SystemJS/Webpack): X.Y.Z 
- I'm using Server Side Rendering with angular-universal: YES/NO
- I'm compiling with mode: DEBUG / PROD / PROD with AOT



Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:

[Ks89]

Hi, that is happening because probably material is using a very high z-index.
Do you have a minimal working example on github or a plunkr/stackblitz live demo?

[momopaper]

thanks for the help, i not sure which line of code should i show to u, so i just share my whole example project for u easier

https://drive.google.com/file/d/1pJWrT6i9VzVPgQOLjHM3MKrqTsKORGQ7/view?usp=sharing

[Ks89]

I tried but I cannot run npm start

The error is:

ERROR in node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(36,14): error TS2314: Generic type 'TemplatePortal<C>' requires 1 type argument(s).
node_modules/@angular/material/tabs/typings/tab-body.d.ts(62,15): error TS2314: Generic type 'TemplatePortal<C>' requires 1 type argument(s).
node_modules/@angular/material/tabs/typings/tab.d.ts(28,23): error TS2314: Generic type 'TemplatePortal<C>' requires 1 type argument(s).

[Ks89]

Ok, I removed node_modules, now it's working.

This issue is not easy to fix, because the problem isn't z-index. However, It's similar to #95.
Modal gallery is built to fill the entire viewport. In your situation, part of the viewport contains sidebars.

I need to investigate to find a different approach. I cannot promise a quick solution, because I have to release a new major release to do this.

[momopaper]

thanks for the help and sorry for no reply as i was not around my pc recently >< , yup i was trying to mess with z-index but no luck, it is ok to take your time :D

[Ks89]

Yes z-index is not enough. It's more complicated.

[ghost]

@momopaper were you able to fix this issue ? I'm facing it the same problem in my project.

[Ks89]

Hi.

This is really difficult to fix. Honestly I don't know how, but I'm happy to talk about possibile solutions and ideas.

Feel free to share proposals to start a discussion

[gagandeepbal]

Any update on this issue? Facing this same issue.

[gagandeepbal]

Setting the z-index on sidenav content (where router-outlet is) fixed the issue. Also, i'm switching mode of sidenav based on screen size using flex-layout, so i have to use ngStyle for setting z-index when sidenav mode is set to side.

NOTE: I'm using material sidenav in my app.

@Ks89 Thanks for your awesome work.

[Ks89]

Thank u, but I'm not able to fix this issue alone.
If you share a runnable example I'll try to investigate again.
More runnable examples as github repos or on stackblitz you share more easily I'll fix this issue.

I'm not using material in production, so it's not simple to simulate all scenarios.

[momopaper]

too bad, i cant find the solution, me and my friends did try fix but unfortunately

[Ks89]

Do you have runnable examples with angular material on github to show issues with materie?

[Ks89]

I'm experimenting cdk and it's interesting, because It works as expected. When I'm ready to integrate into the library I'll update this issue.

[Ks89]

To fix this issue I have to rewrite a huge part of the library, so I'll need time and I'm quite sure to work on this during this winter for angular-modal-gallery 8.0.0.

I prefer to release version 7.0.0 this autumn with carousels and other features, instead of delay everything to this winter.

[veliksergey]

Experiencing the same issue.. mat-sidenav and fixed mat-toolbar are always on top of modal-gallery

[Ks89]

@veliksergey I'll fix this with 8.0.0 (already work in progress), but I have to re-write a big part of the library (only internal stuff), so I need some time to do that.

First of all, I'll release 7.3.0 next month with a huge internal change to speed up 8.0.0 release. In this way, I can add the required changes that I'm experimenting on top of 7.3.0.

[veliksergey]

@Ks89 I was able to go around this problem by putting ks-modal-gallery inside mat-dialog component
Of course it's not the best solution, but it should work for now

Main Component:

galleryRowDescConfig: PlainGalleryConfig = {
    strategy: PlainGalleryStrategy.CUSTOM,
    layout: new AdvancedLayout(-1, true)
  };

constructor(private dialog: MatDialog) { }

openGalleryDialog(image: Image) {
    const index = image ? this.images.indexOf(image) : -1;
    this.dialog.open(GalleryDialogComponent, {
      data: {
        images: this.images,
        galleryConfig: this.galleryRowDescConfig,
        index: index
      }
    });
  }

<figure *ngFor="let img of images">
    <img [src]="img.modal.img" [alt]="product.title" (click)="openGalleryDialog(img)">
  </figure>

In GalleryDialogComponent:

constructor(
    public dialogRef: MatDialogRef<GalleryDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: {
      images: Image[],
      galleryConfig: PlainGalleryConfig,
      index: number
  }
  ) { }

  ngOnInit() {
    setTimeout(() => {
      this.data.galleryConfig = Object.assign(
        {}, this.data.galleryConfig, {
          layout: new AdvancedLayout(this.data.index, true)
        }
      );
    }, 0);
  }

  closeDialog(): void {
    this.dialogRef.close();
  }

<ks-modal-gallery [id]="1"
                  (close)="closeDialog()"
                  [modalImages]="data.images"
                  [plainGalleryConfig]="data.galleryConfig">
</ks-modal-gallery>

<!-- close btn in case dialog won't close -->
<button mat-raised-button
        color="accent"
        mat-dialog-close>
  Close Me
</button>

[Ks89]

Thank you for sharing your temporary solution.
Next month I'll create the official issue for 8.0.0 development with the scheduling.

[Ks89]

Fully implemented (branch 800) with angular/cdk and scheduled for 8.0.0-beta.1 that is coming soon.

I close this issue because already done and It will be available in a beta release in some days.