'ngb Modal make background scrollable

I am searching for away to override the

 overflow: hidden

style from

<body class"modal-open"></body>

I am using bootstrap 4 modals. The background should be scrollable. Thx

Edit: I tried renderer2 for angular

this.modalRef = this.modalService.open(content, options);
this.renderer.removeClass(document.body, 'modal-open');
//this.renderer.removeClass('body', 'modal-open');
//this.renderer.setStyle('body', 'hidden', 'visible');

Neither of those options seemed to work

Solution 1:^[1]

I am removing the tag via the renderer therefore use as already mentioned

@import {Renderer2} from '@angular/core'

inject it in the constructor

constructor(private modalService: NgbModal, private renderer: Renderer2) { }

I assume the class is added sligthly after openModal is called. Therefore i added an async / await

this.modalRef = this.modalService.open(content, options);
        this.modalRef.result.then((result) => {
            this.sendMessage(`${result}`);
        }, (reason) => {
            this.sendMessage(`${this.getDismissReason(reason)}`);
        });
        setTimeout( () =>{
            if(document.body.classList.contains('modal-open')){
                this.renderer.removeClass(document.body, 'modal-open');
                console.log('change');
            }
        }, 100);

the class is now properly removed

Solution 2:^[2]

I opened the modal with the options

NgbModal.open(DialogComponent, {
    backdrop: false,
    windowClass: "no-pointer-events"
})

And added this css to my base css file

.no-pointer-events {
    pointer-events: none;
}

Seems to work. I can scroll and interact with the page behind the modal.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	x3lq
Solution 2	NDavis

'ngb Modal make background scrollable

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]