Scroll bar appears under fixed div

[adama357]

We've been using ng-sidebar for awhile now, and for the most part it works well. However, since the beginning we have had this problem:

We have a fixed div taking up the entire page width at the top (a header bar), and the browser's scrollbar appears underneath the div. (The desired behavior is for the scrollbar to appear along the entire right side of the page, not to have it overlapping with the page contents.) After a quick search, I learned that the problem arises from a page body's overflow settings. In this case, it was being caused by the ng-sidebar page structure.

The exact code has had to change a few times as we've updated ng-sidebar, but as of v. 6.0.0, the get-around code is as follows:

ng-sidebar-container {
    overflow: inherit !important;   // hidden by default
}

.ng-sidebar__content {
    overflow: inherit !important;  // auto by default
}

But with the latest version, this hacky solution introduces a new problem: The sidebar is stuck at the top of the page, so if you scroll down and open the sidebar, you'll see the bottom of the sidebar and backdrop. You're able to scroll the page freely while the sidebar's open. (Removing the above CSS fixes these problems.)

I'll try to see if there's additional CSS I can add to the sidebar to get rid of this problem. But in the meantime, I just thought I'd let you know about this problem in case there's some way to get around it.

Thanks!

[adama357]

By adding this CSS code, I'm able to keep the sidebar on the screen:

.ng-sidebar__backdrop[_ngcontent-c0] {
    position: fixed !important;
}

.ng-sidebar[_ngcontent-c1] {
    position: fixed !important;
}

Even after setting [trapFocus]="true", I wasn't able to find a way to stop the page from scrolling while the sidebar's open (much less of a problem). I assume that's why the overflow was set to hidden in the first place.

[Teebo]

Any update on this?

[tatjana-arthronica]

I am looking for a solution as well

[Teebo]

Hi @tatjana-arthronica, please let me know if you did manage to come up with something, I will also keep you posted

[tatjana-arthronica]

Hi @tatjana-arthronica, please let me know if you did manage to come up with something, I will also keep you posted

Hi @Teebo, my temporary solution is setting fixed element's width on page load and on window resize (it is fixed header in my case). Let me know if you need to see example code.

[Teebo]

Hi @tatjana-arthronica, thank you for the response, yes please share your code if possible.

[Teebo]

@tatjana-arthronica I have also figured in out, your approach helped me, thanks!

[buddhikadesilva]

In app.component.html

• add above to ng-sidebar-content
  <div #inner ng-sidebar-content>

• add above to router-outlet
  <router-outlet (activate)="onActivate($event)"> </router-outlet>

In app.component.ts

 @ViewChild('inner') inner: ElementRef;
  onActivate(event) {
    this.inner.nativeElement.parentElement.scrollTop = 0;
    }

Just try this you can solve the problem

---