Ngx-bootstrap: component as a modal how to manage size small/large/fulls creen

[musman92]

Before opening an issue, please search for duplicates (opened and closed)
https://github.com/valor-software/ngx-bootstrap/issues
There's no need to open an issue here if you want to ask general question, use StackOverflow or Slack instead

Bug description or feature request:

did not find any options. how can i change the modal size.

Plunker/StackBlitz that reproduces the issue:

Using Plunkr, StackBlitz is the best way to show your issue. Issues without link to an example of reproduction might be closed.

You can use one of starter templates:

Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview

StackBlitz: https://stackblitz.com/edit/ngx-bootstrap?file=app%2Fapp.module.ts

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap:2.0.5

Angular:angular 6

Bootstrap:4

Build system: Angular CLI, System.js, webpack, starter seed:

[olshansky]

@musman92 you can use bootstrap classes for modal-dialog: modal-lg - large modal, modal-sm - small modal

[musman92]

@olshansky i found a solution for that.

const initialState = { id: 12312, type: "test", class: "modal-lg" }; this.bsModalRef = this.modalService.show(AbcComponent, initialState);
now when modal appear it contain class modal-lg, so you can add as many classes as you want

[AruljothySundaramoorthy]

@musman92 you can use bootstrap classes for modal-dialog: modal-lg - large modal, modal-sm - small modal

But when tried to use this method it won't works...find the snippet below

, {class: 'modal-md'}

[paulhewitt]

@Arruls8 I don't believe that modal-md is a valid size. According to the documentation, it looks like there are only the two sizes, modal-lg and modal-sm

[jorgegraujornet]

You can declare your own classes in yor css page, e.g:

.my_class{
    width: 100%;
}

and then pass it to the component:

const initialState = { 
    class: "my_class" 
};

There are certain limits imposed by min-width and max-width, depending on the size of the window, but in between them you can change the sizes of the modals