4

Using mat-sidenav from Angular Material I have a problem with a fixed positioned element and centering it according to centered content within the mat-sidenav-content element.

One possible solution might be to calculate the width of the scrollbar and use this to align the fixed element accordingly, but this seems to be a bit ugly.

I prepared a Stackblitz illustrating the problem: https://stackblitz.com/edit/angular-u9ucr6

The goal is to have both colored elements being centered in respect to the scrollbar of mat-sidenav-content.

Any ideas?

mwinkelm
  • 111
  • 3
  • 1
    I'll add it as a comment, because I don't know if it suits your needs, but you could think about using position: sticky, instead of fixed [example](https://stackblitz.com/edit/angular-u9ucr6-dylooc?file=src/main.ts) – Poul Kruijt Oct 31 '19 at 15:04
  • Thanks for your suggestion, but in my real project this fixed element is slided in based on scrolling a particular element out of the viewport (recognized by utilizing `IntersectionObserver`). Unfortunately I'm stuck to `position: fixed;` – mwinkelm Oct 31 '19 at 15:19

0 Answers0