How to change ngx bootstrap modal width?

Question

How can I set the width to my ngx bootstrap modal, I've tried but like It is fixed?

Here's the html

    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" 
     role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <button type="button" class="close" data-dismiss="modal" aria-
    label="Close" (click)="hide()"><span aria-hidden="true">&times;</span>
     </button>
            <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
            <div class="modal-footer">
                <div class="col-xs-6 no-padding-left">
                    <button type="button" id="dialog_no" class="btn btn-
        default btn-block" data-dismiss="modal" (click)="hide()">No</button>
                </div>
                <div class="col-xs-6 no-padding-right">
                    <button type="button" id="dialog_yes" class="btn btn-
     primary btn-block ladda-button" data-style="expand-right" 
     (click)="confirm()">Yes</button>
                </div>
            </div>
        </div> 
    </div>
     </div>
  </div>

How can I set the width of the modal for buttons to be placed just on the edge of the modal, with lets say 5 px of border margin?

modal bootstrap

I haven't put any styling yet in my css file, even tho I've tried to modify the width but didn't I guess know how...

score 21 · Answer 1 · answered Nov 01 '18 at 20:13

On your method call for the modal, you can setup a configuration object with the ModalOptions class that also comes with ngx-bootstrap. Within that, the 'class' property allows you to pass classes which will be appended.

const config: ModalOptions = { class: 'modal-sm' };
this.bsModalRef = this.modalService.show(YourComponent, config);

hope this helps

score 9 · Answer 2 · edited Oct 12 '21 at 10:09

9

When creating a modal, pass your css class to options like this:

this.modalService.show(template, { class: 'modal-lg' });

edited Oct 12 '21 at 10:09

Akash Kumar Verma

3,185
2
16
32

answered Dec 16 '19 at 13:36

Savan Gadhiya

1,082
2
11
16

score 7 · Answer 3 · answered Jul 05 '19 at 07:42

7

similar to @jgrittens response.

this.modalRef = this.modalService.show(template);
this.modalRef.setClass('modal-sm');

it sets the max-width to 300px

answered Jul 05 '19 at 07:42

LuckyLikey

3,504
1
31
54

I want to give a size as I wish . How to do that. please tell me. – Kumaresan Perumal Feb 27 '20 at 12:41
1

@Kum you either overwrite the existing css classes, or add your own. – LuckyLikey Feb 27 '20 at 15:59
could you please give me an example ? – Kumaresan Perumal Feb 28 '20 at 04:50
@kum check [this](https://stackoverflow.com/a/51258691/4099159) out. – LuckyLikey Feb 28 '20 at 06:30

score 5 · Answer 4 · edited Sep 25 '20 at 13:45

5

You can simply use the below style to overwrite the original dimension of modal

::ng-deep .modal-dialog{
    max-width: 1200px !important;
    width: 1200px;
  }

edited Sep 25 '20 at 13:45

NearHuscarl

66,950
18
261
230

answered Sep 21 '20 at 15:29

Dhruv Patadia

152
2
10

score 3 · Answer 5 · answered Feb 01 '19 at 17:35

3

I would suggest adding "encapsulation: ViewEncapsulation.None" to your component decorator and then override the class with something like:

 .modal-dialog{
    max-width: 600px !important;
    width: 600px !important;
  }

answered Feb 01 '19 at 17:35

Jay Ordway

1,708
2
11
33

1

it applies this specific width to my all models. I want to apply it in my one modal only. – Savan Gadhiya Apr 10 '20 at 16:42

score 2 · Answer 6 · edited May 20 '21 at 14:24

2

Use Set Class

let modal = this.bsModalService.show(ConfirmModalComponent, { 
         initialState: { message: 'คุณแน่ใจหรือไม่ว่าจะลบข้อมูล Voucher นี้?' },});

modal.setClass('modal-custom-style');

And Custom CSS

::ng-deep .modal-custom-style { max-width: 1200px!important; width: 1200px; }

edited May 20 '21 at 14:24

Bijin Abraham

1,709
2
11
25

answered May 20 '21 at 02:59

Jaroon Umpornpoolsuk

21
1

You can edit all css in this modal , Example : // --- Modal CSS -- // ::ng-deep .modal-custom-style { max-width: 380px !important; width: 380px; max-height: 290px !important; height: 290px; .modal-content { border: none !important; } } – Jaroon Umpornpoolsuk May 20 '21 at 03:09

score 0 · Answer 7 · answered Oct 10 '18 at 14:08

0

You can use only CSS styles to change the width of the container. Change max-width property for .modal-dialog class, in some cases for .modal-sm class.

answered Oct 10 '18 at 14:08

Ilya Tarusin

11
3

2

I don't believe this works due to Angular's view encapsulation, since the `.modal-dialog` class is nested. – user3777933 Oct 27 '18 at 19:39
1

@user3777933 yes I have tried it. It is not working. – Savan Gadhiya Apr 10 '20 at 16:49
.modal-sm { max-width: 350px !important; } .modal-lg { max-width: 559px !important; } – aarffy Oct 11 '20 at 15:41

score 0 · Answer 8 · edited Dec 05 '19 at 04:53

0

You can use doucment.getelementsbyClassName after you create the modal. Then you can change the element minWidth as you wish.

edited Dec 05 '19 at 04:53

hiFI

1,887
3
28
57

answered Dec 05 '19 at 03:01

jim

1

score 0 · Answer 9 · answered Jul 04 '20 at 06:25

just add this line in your ts file: config: ModalOptions = { class: 'modal-lg' }; then pass config also in the show method of BsModal sERVICE

EXAMPLE:

config: ModalOptions = { class: 'modal-lg' };
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, this.config);

}

score 0 · Answer 10 · answered Oct 06 '20 at 16:23

0

This works for me. In styles.scss...

.modal-lg {
    max-width: 559px !important;
}

answered Oct 06 '20 at 16:23

aarffy

231
2
13

score 0 · Answer 11 · answered Mar 19 '21 at 18:20

0

What worked for me was ::ng-deep with .modal-content, but only after I placed the !important property

::ng-deep .modal-content {
    max-width: 1080px!important;
}

answered Mar 19 '21 at 18:20

Gabriel Visconti

41
4

How to change ngx bootstrap modal width?

11 Answers11