search

ng-bootstrap / ng-bootstrap

Angular powered Bootstrap
https://ng-bootstrap.github.io
MIT License
8.22k stars 1.55k forks source link

.model-body class not work properly when using NgbModal.Open() #4768

Open stevenxi opened 1 week ago

stevenxi commented 1 week ago

Bug description:

When open a modal, .modal-body class's flex: 1 1 auto doesn't work, due to "modal-content" is no longer a direct parent of "modal-body". The component element sits between them.

As result, when open modal as fullscreen, modal-content no longer expand to full height, and modal-footer no longer aligned to bottom of the screen.

image

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/stackblitz-starters-wbubms?file=src%2Fmain.ts

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 18.1.0

ng-bootstrap: 17.0.1

Bootstrap: 5.3.3

stevenxi commented 1 week ago

Solution could be find way move .modal-content to the component.

For the moment there's a way to get around, but not proper. To include the .modal-content in component's host class:

@Component({
  host: {'class': 'modal-content'}
})

This could get around the problem. But it's not a proper solution, as the 'modal-content' class would be included in the component even when the component was not used in a modal.