CODEWITHSUNDEEP
cssangularng-bootstrap
Shrinivas
Shrinivas

Reputation: 853

Angular + ng bootstrap modal not appearing

I am using ng bootstrap in my project. All I am stuck with doing is opening a modal. I read a similar thread but there, bootstrap css was not included.

I am following this example.

When I click the button to open the modal, modal gets appended in the DOM (visible when inspected using dev tool) but it is not visible on the screen.

I have included bootstrap css in my .angular-cli.json as

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

Bootstrap css is also visible in styles.bundle.js when page source is viewed.

Edit 1: When inspected, for ngb-modal-window opacity was set to 0. When I set it to 1, popup became visible. But position of the popup is not center. It is pulled to the top. Please refer the image:

ng bootstrap modal pulled to the top

Upvotes: 2

Views: 2119

Answers (2)

Max Rafiandy
Max Rafiandy

Reputation: 31

I've faced the same issue when try to use ng-bootstrap with bootstrap 3. install ng-bootstrap-to-bootstrap-3 and follow the instructions saved my day.

Upvotes: 0

Prasanth S
Prasanth S

Reputation: 535

you can include in css

@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');
in 'styles.css'

in some cases ngx-bootstrap not works exactly as expected in angular 2/4.

Upvotes: 1

Related Questions