How to center an ngx-bootstrap modal

Question

Trying to center this ngx-boostrap modal using CSS like this but it's not working:

.modal.fade.in{
  display: flex;
  justify-content: center;
  align-items: center;
}

But in the dev tool, I'm able to add CSS like this:

.modal.dialog{
  top: 50%
}

So at least it is centered vertically, but this is in the dev tool, and there is no .modal.dialogclass in the html template

Is there a way to center properly the ngx-bootstrap modal ?

I want to create a generic modal component to use it anywhere, by providing an input message and adding a yes/no dialog and output the user choice (using EventEmitter)

I've found an example in the following Plunker, but not able to reproduce it in a separate custom component.

The plunker example comes from this website: https://github.com/valor-software/ngx-bootstrap/issues/2334

Update:

After @Wira Xie answer, when I use the Static modal and this CSS:

.modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5); 
}

The modal shows centered, but only the Esc key can hide it, so when I click outside the modal, it's still visible.

score 36 · Accepted Answer · edited Jul 02 '18 at 16:59

36

Why not to use bootstrap modal-dialog-centered class:

this.modalRef2 = this.modalService.show(ModalContentComponent,
     {
       class: 'modal-dialog-centered', initialState 
     }
);

edited Jul 02 '18 at 16:59

HDJEMAI

9,436
46
67
93

answered Jul 02 '18 at 16:19

mrapi

5,831
8
37
57

HDJEMAI mrapi I added this class and it reflected in html with modal-dialog but no effect. – Always_a_learner Jul 16 '18 at 09:24
It worked for me, maybe your version of bootstrap is outdated? `, initialiState`shouldn't be there however. – Pieter De Bie Jan 08 '19 at 09:58
Not working in this example: https://stackblitz.com/edit/ngx-bootstrap-fxafa1?file=app/app.component.ts using bootstrap 4.3.1, Any idea why ? – HDJEMAI May 25 '19 at 02:54
Any Stackblitz that can demo this in Bootstarp 3 or 4, that I can accept this answer ? – HDJEMAI Jun 04 '20 at 10:04
@mrapi: can you provide a Stackblitz demo link for this. – HDJEMAI Jun 04 '20 at 10:06
@mrapi: I was able to test this with Bootstrap 4 in a project, so it works, I accepted the solution. it will be more interesting if you can add a Stackblitz example to this answer, that it can help more people. – HDJEMAI Aug 22 '20 at 21:18
I don't use Stackblitz,if you are have a working link post it here – mrapi Aug 23 '20 at 08:55

score 13 · Answer 2 · edited May 22 '20 at 09:07

13

in the .ts file you have a code like this (to open modal popup)...

private showModal(template: TemplateRef<any>): BsModalRef {
    return this.modalService.show(
      template,
      { class: 'modal-lg modal-dialog-centered',
        ignoreBackdropClick: true, 
        keyboard: false
      });
}

You can see that I've added modal-dialog-centered to the class. after doing this you can also modify the modal-dialog-centered class in your css.

edited May 22 '20 at 09:07

HDJEMAI

9,436
46
67
93

answered Jan 18 '19 at 05:50

Isham Sally

159
1
4

perfect for me! – Dener Rocha Feb 04 '21 at 18:20

score 9 · Answer 3 · edited Aug 26 '18 at 18:18

9

Try adding this attribute to your CSS: vertical-align: middle to your .modal.dialog class

Plunker for modal

.modal.fade {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal-dialog {
    vertical-align:middle;
    height:18em;
    background-color: rgba(0,0,0,0.5); 
}

edited Aug 26 '18 at 18:18

HDJEMAI

9,436
46
67
93

answered Oct 24 '17 at 17:21

Nesan Mano

1,892
2
26
43

`class: 'modal-dialog-centered'` why not just add this as suggested in other answer, is your method to be used in certain situations? – BeeBee8 Jun 19 '19 at 10:49

score 5 · Answer 4 · edited Oct 03 '18 at 13:29

You need to use the bootstrap class.

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
...
})
export class ModalComponent {
  modalRef: BsModalRef;

  // Here we add another class to our (.modal.dialog)
  // and we need to pass this config when open our modal
  config = {
    class: 'modal-dialog-centered'
  }

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    // pass the config as second param
    this.modalRef = this.modalService.show(template, this.config);
  }
}

score 1 · Answer 5 · edited Oct 30 '20 at 14:10

1

You have to pass the modal-dialog-centered bootstrap class for the BsModalService.show() function like this:

 const initialState = {
      organization: organization,
 };

 this.modalRef = this.modalService.show(AdminOrganizationCreateComponent, {
      class: 'modal-dialog-centered', initialState 
 });

Note: if you need to pass initial data you can pass it using the initalState object.

edited Oct 30 '20 at 14:10

Supun Praneeth

3,087
2
30
33

answered Oct 29 '20 at 04:24

Malith

506
5
9

What is new in this answer ? it's just a copy-paste of the accepted one ! – HDJEMAI Oct 29 '20 at 07:39

score 1 · Answer 6 · answered May 10 '21 at 20:24

A bit late, but for reference.

The reason the styling of the dialog in the component is not working, is because component styling is isolated and restricted to elements within the component. The dialog created through the bsmodalservice is outside of this component. (directly under <body>).

So, while your styling is encapsulated in the component and some random identifier, the dialog itself is not. The final css (like mycomponent[_ngcontent_bla_323] .modal) does not apply to the div.modal that is added by the service.

Possible solutions are:

Move your css for this dialog to some global (s)css file instead of the (s)css for the component
Instead of using bsModalService with a template, use the bsmodal directive with a div within your component. That way the component local (s)css will apply.

score 0 · Answer 7 · answered Nov 04 '20 at 13:38

I have added mat-step inside the modal and because of that it didn't align centered for modal-dialog-centered bootstrap class ether. But modal-lg class worked for me. Sample code is very similar to the accepted answer. Only change the bootstrap class which is passed to the modal.

this.modalRef = this.modalService.show(AddDevelopersGroupComponent,{
      class: 'modal-lg',
      initialState,
});

score -1 · Answer 8 · edited Nov 04 '18 at 03:22

This is a snippet from my personal project using ngx-bootstrap too.

.modal-sm
{
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; 
    margin-left: -15em; 
    background-color: #001b00; 
    /*position:fixed;*/
}

<!--typecript files-->
<script>
//here is the typesciprt file
export class AppComponent 
{ 
    //for default ngx-bootstrap modal
    public modalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    public openModal(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template);
    }
}
</script>
<!--end of ts file-->

<!--Modal-->
<div class="container">
    <div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title pull-left">Small modal</h4>
              <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              
            </div>
          </div>
        </div>
      </div>
<!--enf of modal-->

Maybe because jsfiddle doesn't support angular typescript yet. I Simply just put a `.modal-sm` to my css. `.modal-sm` can be found at `
` — Wira Xie, Oct 24 '17 at 02:39
I'm not really familiar code with plunker, maybe you can provide your modal html. — Wira Xie, Oct 24 '17 at 03:08
This is a bad quality example, that a) isn't working and b) doesn't show the correct source code on how to infer an anywhere near correct answer! — Rob, Nov 02 '17 at 15:07

score -1 · Answer 9 · answered Apr 21 '19 at 19:17

-1

According to the documentation you can center the modal vertically via setting centered property to true (as it is false by default)

const modalRef = this.modalService.open(ConfirmationDialogComponent, {
      size: dialogSize,
      centered: true 
    });

answered Apr 21 '19 at 19:17

Mahmoud-Abdelslam

615
6
15

you are referencing to the other (similar) library NG-bootstrap that is NOT the asked library NGX-bootstrap – Magico Aug 22 '22 at 19:45

How to center an ngx-bootstrap modal

9 Answers9