Encountering an issue while working with the Angular 6 + Bootstrap 4 combination - the modal opens up behind the modal-backdrop. Oddly enough, this is the only modal in the project that behaves this way.
Libraries imported in Angular.json file:
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Button to open modal:
<div class="row">
<div class="col">
<button class="btn btn-md" data-toggle="modal" data-target="#modalID">Click Here</button>
</div>
</div>
Modal structure (simplified):
<div class="modal fade" id="modalID">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- Header Here -->
</div>
<div class="modal-body">
<!-- Body here -->
<div class="modal-footer">
<div class="col-6">
<!-- Buttons here -->
</div>
</div>
</div>
</div>
All HTML code is within a child component, part of a parent component. See code below:
<div class="row">
<div class="col-lg-9">
<div class="space-bottom">
<app-given-component></app-given-component>
</div>
</div>
</div>
The issue of the modal appearing behind the backdrop could be due to styling on the row class. Removing display:flex; using dev tools fixes the modal positioning, but messes up the rest of the page's styling. Struggling to find a solution without removing row or col-lg-9 classes.
Any help would be greatly appreciated.
Thank you, Alex