Ngx-bootstrap: Any option to set the modals to show in center

[JinnaBalu]

When I use the models i am able to show them on top. Is there any solution to show on different places of the page. or do you have any css to to place at center. I wrote a css when i apply it on console element it works but when i apply from code end it does not work as this is a template

[IlyaSurmay]

Apply a custom class to modal and work with it. You can show modal in center using css rules like margin, position, transform:translateY(), or using flexbox model.

[IlyaSurmay]

Take a look at style.css here https://plnkr.co/edit/NJRvUMZN2kHZruFgeOjQ?p=preview

[hocine15]

I've tried to use the provided CSS in my custom component but it's not working

I'm very surprised that no example talks about how to center modals in the documentation.

all the modals are shows in top of the screen ...

I've asked a question here: https://stackoverflow.com/questions/46898035/how-to-center-an-ngx-bootstrap-modal

but no answer yet

[hocine15]

what to add to the example: Modal with component, that it can show in the center ?

can the documentation be updated to include positioning ?

[JanLoebel]

Boostrap 4 itself already has a class to center the modal, it's called 'modal-dialog-centered'. You just need to add it to the 'modal-dialog' element.

Example:

const config = {
  ignoreBackdropClick = true;
  class: 'modal-dialog-centered'
}
this.bsModalService.show(ModalComponent, config);

[webkhushboo]

@JanLoebel Thanks . It worked for me :)

[harsimerkaur]

@JanLoebel added class modal-dialog-centered, but no effect. Which version of bootstrap does support this class?

[JanLoebel]

@harsimerkaur I'm using version bootstrap 4.0.0.

[harsimerkaur]

@JanLoebel I am using version 3.3.7 and I am able to add class but neither modal-dialog-centered has any effect on modal nor any custom CSS does apply. I am using ngx-bootstrap modal. Didn't find any solution on stackoverflow either.

[JanLoebel]

@harsimerkaur I'm using "ngx-bootstrap" in version 2.0.4 and bootstrap in version 4.0.0. When you want to apply custom css, be aware that it could be that you will have to wrap it in a ::ng-deep.

::ng-deep {
  .modal-dialog-centered {
    border: 1px solid red;
  }
}

Have you checked that the class modal-dialog-centered is applied in the DOM?

[harsimerkaur]

Yes class is added to modal, checked in DOM. I used

:host ::ng-deep

.modal-dialog-centered
{
justify-content: center;
align-items: center;
}

and

:host >>>

.modal-dialog-centered
{
justify-content: center;
align-items: center;
}

None worked.

[fchiumeo]

justify-content is flex prroperty
only bootstrap 4 has flex

[harsimerkaur]

@fchiumeo It works when I add it in browser console directly. moreover no other CSS works,

[harsimerkaur]

@JanLoebel @fchiumeo Added CSS in project\src\styles.css and it worked. Thanks for help!