Open Bootstrap 5 modal will shift the header and background to the right

I'm using Angular 2 and Bootstrap 5 for front-end. When open a modal, the header and background shifts to the right, which cover the scrollbar.

After checking, I realized that the HTML code changed from

<body class style>

into

<body class="modal-open" style="overflow: hidden; padding-right: 17px">

After that, I tried to fix by adding the code both in CSS file and HTML tag:

overflow-y: scroll !important;
padding-right: 0 !important;


But the only thing fixed is that the scrollbar was no longer covered, the header and background were still buggy. Also using class p-xl-0 at the body tag didn't change anything at all. Are there any idea about this?

Thank you for reading.

Continue reading...