CODEWITHSUNDEEP
cssangularcenteringngx-bootstrapngx-bootstrap-modal
HDJEMAI
HDJEMAI

Reputation: 9800

How to center an ngx-bootstrap modal

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.

Upvotes: 17

Views: 33557

Answers (9)

Jelmer Jellema
Jelmer Jellema

Reputation: 1116

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.

Upvotes: 1

Malith
Malith

Reputation: 571

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,
});

Upvotes: 0

Malith
Malith

Reputation: 571

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.

Upvotes: 1

Isham Sally
Isham Sally

Reputation: 189

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.

Upvotes: 15

Mahmoud-Abdelslam
Mahmoud-Abdelslam

Reputation: 643

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 
    });

Upvotes: -1

Wira Xie
Wira Xie

Reputation: 839

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

Upvotes: -1

Druta Ruslan
Druta Ruslan

Reputation: 7402

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);
  }
}

Upvotes: 5

Nesan Mano
Nesan Mano

Reputation: 2166

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); 
}

Upvotes: 9

mrapi
mrapi

Reputation: 6015

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

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

Upvotes: 37

Related Questions