Search code examples
angulardatepickertimepickerbootstrap-datetimepicker

Owl datepicker is skewing sidebar menu


Using Angular 8 and Owl datepicker 7.00, when opening the datepicker without scrolling down the page, it works as expected. However, if you scroll down the page first and then open the datepicker, the sidebar menu and app header get pushed upwards. No custom css is used, all out of the box. Any suggestions would be greatly appreciated.

I've tried position: fixed, z index position relative, position absolute.


Solution

  • After searching for days I have finally found a way by inspecting the element;

    The class cdk-global-scrollblock gets a position of -500px top which pushes the background to the top

    So I did further searching by searching for cdk-global-scroll and there was an answer to the issue.

    https://github.com/angular/components/issues/7512