Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow full bootstrap modal html structure

See original GitHub issue

Currently, when creating a modal based on an ng-template, it is not possible to set the “outer” divs of the modal.

ng-bootstrap needs only the modal-header, modal-body and modal-footer.

When I provided the following divs (with some extra classes, that’s why I need to do this in the first place) before modal-body the modal does not show anymore:

<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
...

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 9.1.7

ng-bootstrap: 6.1.0

Bootstrap: 4.4.1

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

serlopez46commented, Jan 29, 2021

Would implementing this allow us to make the modal draggable with cdkDrag when passing a Component to the open method? If so, this would be very appreciated.

1reaction

maxokorokovcommented, Aug 20, 2020

I’m going to leave open this as a feature request. In the end it is generally not a good idea to hide BS markup behind components.

Top Results From Across the Web

Modal

Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so...

How to Create Modals with Bootstrap 5

Always try to place your modal HTML in a top-level position in your document, preferably before closing of the <body> tag (i.e. </body>...

Bootstrap Modal - examples & tutorial

Responsive popup window with Bootstrap 5. Examples of with image, modal position i.e. center, z-index usage, modal fade animation, backdrop usage, ...

How to pass data into a bootstrap modal?

Bootstrap is a CSS framework used for designing web pages. Bootstrap v4.5 is the latest release. Bootstrap along with HTML and JavaScript ...

Bootstrap 4 Modals

Complete Bootstrap Modal Reference. For a complete reference of all modal options, methods and events, go to our Bootstrap JS Modal Reference. ❮...