Bootstrap 4 modal in Angular 6 child component

Question

While working with Angular 6 + Bootstrap 4 combination I stumbled upon the issue with modal. Whenever I open a modal - it opens up behind the modal-backdrop. Interesting that it is not the only modal on the project, but only this one acts funny.

I have imported relevant libraries as follows (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 itself (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>

Now all of the HTML code is inside a child component - which is a part of a parent. Code below:

<div class="row">    
  <div class="col-lg-9">
     <div class="space-bottom">
       <app-given-component></app-given-component>
     </div>
   </div>
</div>

I personally believe that the issue the modal is behind the backdrop is due to styling on row class. Using dev tools I remove the display:flex; and modal appears to be OK, but the rest of the styling on the page becomes messed up. I don't know how to overcome this.

Additional note: it is not an option to remove row or col-lg-9 classes.

I would really appreciate your help.

Many thanks, Alex

There are a few ways to solve this. Ideally you would put your modal directly inside . If that is not an option, you could use a high z-index on the modal to force it on the foreground. Check this question: https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background — Andrei Savin, Sep 16 '18 at 15:01
I cannot put it outside the component, because I'm calling some of the private functions in _.ts_ file.. Putting z-index on a modal doesn't make a change, while putting a _z-index:-1;_ on a **modal-backdrop** pushed forward not only the modal but some of the _Cards_ (which are on the same page)... — Alex Ananjev, Sep 16 '18 at 15:06

score 1 · Accepted Answer · answered Sep 17 '18 at 07:05

After multiple attempts to resolve the issue using CSS failed, I went for last resort option and combined both child and parent components. This gave me a chance to put my modal outside the row -> col class structure.

Apparently, you cannot use modal when one of the parent elements is display:flex;

Not a very nice solution, but sure does work!

score 0 · Answer 2 · edited Nov 09 '18 at 14:37

0

//angular.json

inside 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"

inside style.css

@import "~bootstrap/dist/css/bootstrap.css";

@import "~font-awesome/css/font-awesome.css";

edited Nov 09 '18 at 14:37

Jake Lee

7,549
8
45
86

answered Nov 09 '18 at 11:15

dheeraj kumar

419
4
6

Bootstrap 4 modal in Angular 6 child component

2 Answers2