Set width to an Angular2-modal window

Question

I'm using Angular2-modal to create a modal with some content which some dynamic contents inside. This content is basically an image, but the dimensions are not always the same, but I know the dimensions when I create the modal, so how can I specify the dimensions of the modal?

this.modal.open(SnapshotCanvasModalComponent, overlayConfigFactory(context, BSModalContext));

being context a simple object with the image inside (base64).

I read that I can use modal-lg or modal-sm to set a class and then redefine those classes, but the dimensions in this case can´t be set by css but dynamically, as I don´t really know the dimensions of the image in advance.

Any ideas? Thanks

there are several models available. Can you please provide the link which model are you using? — The Hungry Dictator, May 08 '17 at 09:08

Bharat Chauhan · Answer 1 · 2017-05-08T10:21:37.633

0

this.modal.open(SnapshotCanvasModalComponent, overlayConfigFactory({ size: "lg"}, BSModalContext));

edited May 08 '17 at 10:21

answered May 08 '17 at 09:13

Bharat Chauhan

3,204
5
39
52

score 0 · Answer 2 · answered Feb 01 '18 at 13:05

0

add this to styles.css file:

 .modal-dialog {
    width: fit-content;
    margin: 0 auto;
 }

then, you can define width on the html content of your modal, and this will be the width of your modal.

answered Feb 01 '18 at 13:05

M Barzel

739
7
9

score 0 · Answer 3 · answered Mar 20 '19 at 15:04

Add this to styles.css

.modal-lg {
  min-width: 900px;
  width: fit-content;
}

This way you can control a minimum width for a sandard modal or when the content is bigger, it adjusts. Also, its better to set the width on 'modal-lg' as thats more appropriate to set width on rather than the modal-dialog class.

Set width to an Angular2-modal window

3 Answers3