scrollable doesn’t work on modals with component as content

Bug description:

When using a component as the content of a modal rather than a template, with the scrollable option set to true, the modal body doesn’t scroll.

The CSS magic apparently doesn’t work when an additional element (the host element of the component) is inserted between the .modal-content and the .modal-body, but I’m so bad at CSS that I can’t even find a workaround.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-rekfnj?file=app/modal-component.ts

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 8.1
ng-bootstrap: 5.0.0-rc.1
Bootstrap: 4.3.1

1 possible answer(s) on “scrollable doesn’t work on modals with component as content

  1. @benouat thanks for taking the time to reply. According to my package.json I am now running Angular 8.2.14 and @ng-bootstrap/ng-bootstrap 5.3.0 and it wasn’t working. But in an effort to really ensure I wasn’t doing something stupid, I tried something and it now works.

    I was wrapping my components html in

    (so that the submit button in the footer works as expected), and that is what breaks it. The solution was to give the form an id and then in the submit buttin, set that the buttons form attribute to that value. Sorry to have bothered.