stickyThing not working inside a mat-sidenav-content

[Sergiu Starciuc]

Hi!

It seems that stickyThing is not working "inside" a mat-sidenav-content of a mat-sidenav-container. Is it possible to make it work? How about stickyThing "inside" a mat-sidenav-content of a mat-sidenav-container of a mat-sidenav-content of a mat-sidenav-container?

Thanks!

[Can Kattwinkel]

Hey @ciukstar,

thank you for your report! I just gave it a shot in a forked StackBlitz and I can confirm the issue you are describing. I already have a suspicion, Material sets the content component to position:absolute, l0,r0,t0,b0. This leads to the issue with Sticky Things, since the body no longer scrolls, but another target. I'll look into it, but it might take me some days.

Repro:
https://stackblitz.com/edit/dynamic-nested-sidenav-menu-z4xws2?file=app/first/first.component.html

[Sergiu Starciuc]

It would be great if stickyThing would work when wrapped in a scrollable mat-sidenav-container.

My concrete scenario is a stickyThing wrapped in a mat-sidenav-content wrapped in a mat-sidenav-container which is wrapped in a scrollable mat-sidenav-content of a mat-sidenav-container.

Thanks a lot!

[Sergei]

Hello,

I have a similar issue, I am trying to use stickyThing inside absolute position element.
For example its set to top: 0, right: 0, left: 0, bottom: 0.

Hopefully there is a solution.

Thanks!

[Can Kattwinkel]

Please test with version 1.1.2. You can now specify the scroll container element. Not sure if any usecase is covered, my minimal example currently covers a position absolute element that has a scroll bar:

https://w11k.github.io/angular-sticky-things/posa

In order to specify a scroll container:

<div class="scroll-container">
  <div #spacer></div>
  <div [spacer]="spacer" stickyThing="" scrollContainer=".scroll-container">
    Scroll by!
  </div>
</div>

Use anything that can be evaluated by document.querySelector or pass in a html element.

Waiting for your feedback!

( fyi @kaihenzler )

[Sergei]

Please test with version 1.1.2. You can now specify the scroll container element. Not sure if any usecase is covered, my minimal example currently covers a position absolute element that has a scroll bar:

https://w11k.github.io/angular-sticky-things/posa

In order to specify a scroll container:

<div class="scroll-container">
  <div #spacer></div>
  <div [spacer]="spacer" stickyThing="" scrollContainer=".scroll-container">
    Scroll by!
  </div>
</div>

Use anything that can be evaluated by document.querySelector or pass in a html element.

Waiting for your feedback!

( fyi @kaihenzler )

Awesome, I think this should work fine, will test later.
I was about to fork your library, but was busy with other work, so kudos for you for a quick response!

Thank you!

[Sergei]

I just tested, and it works, thanks!

Small issue I encountered.
When I bind the value as marginTop=30, it didn't work. I had to use it as [marginTop]=30 instead. it was adding the value as a string concat instead adding two numbers together. So if my object is 100px height it would return a spacer height as 10030px instead of 130px.

Thanks again.

[Can Kattwinkel]

Thanks for the review. Yepp, its a known issue that has already been fixed by another user. Will be released soon! #26

[Sergiu Starciuc]

Yes it works. Thank you very much!

[Arda Oğul Üçpınar]

I still cannot make it work. Tried everything mentioned in the comments one by one...

[Seth Broweleit]

It worked for me when I did it like this:

<mat-sidenav-container>
  <mat-sidenav>…</mat-sidenav>
  <mat-sidenav-content class="msc">
    <div class="content">…</div>
  </mat-sidenav-content>
</mat-sidenav-container>

<div stickyThing [scrollContainer]="'.msc'"></div>

It gets the element there in time for the directive to find it. @anelad