0

Essentially what the title says - need to make this wider. Tried several solutions, neither work. Note that the "backdropClass" is applied perfectly and works, but the windowClass doesn't, nor the "size" option. I have tried them independently, nothing. CSS is in the same folder as the working backdrop class"

                        $modal.open({
                            templateUrl: 'myTemplate.html',
                            controller: 'controllingControllerCtrl',
                            backdrop: 'static',
                            backdropClass : 'blackBackgroundModal ' +
                                'blackBackgroundModal.fade blackBackgroundModal.fade.in',
                            windowClass: 'resizeModalWindow' +
                                'resizeModalDialog',
                            size: 'sm'
                                    });
                                }
                            }

CSS:

.resizeModalWindow .resizeModalDialog {
    width: 5000px; 
}

What needs to be done for at least the "size" option to register - I don't really need custom widths.

Edit: Forgot checked links!

Checked this Q first

Then this

And of course docs

Community
  • 1
  • 1
VSO
  • 11,546
  • 25
  • 99
  • 187
  • I see a `size:'sm'` doesn't that make it small ? – ODelibalta Jul 15 '15 at 20:25
  • Does absolutely nothing. Tried 'lg' too. – VSO Jul 15 '15 at 20:26
  • size does work, it works for me... it adds the modal-sm or modal-lg classes to your modal-dialog class, you can add a plunker for us to see why it doesnt work for you... – Jony-Y Jul 15 '15 at 20:41
  • In the end my controller was being cached somehow or something. I have no idea. It does indeed work. Wow, 2 hrs well wasted on my part. – VSO Jul 15 '15 at 21:02

3 Answers3

1

You should have white space between those two classes will recognize by the css rule.

windowClass: 'resizeModalWindow ' +'resizeModalDialog',
                               ^^^added space here
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Valid, but a result of type while changing values to example names. Unfortunately doesn't solve the problem. Good call though, thank you. – VSO Jul 15 '15 at 20:30
1

bootstrap css has media queries defining the width of a modal based on screen size. to globally overwrite them use !important

like this

.modal {
    size: 5000px !important;
}
richbai90
  • 4,994
  • 4
  • 50
  • 85
  • We use a lot of modals in our application, I only need to resize one. In fact, it is not an option to resize all. That's good to know overall though, thumbs up. – VSO Jul 15 '15 at 20:30
0

Add this to your CSS:

.resizeModalDialog .modal-dialog{
   width: 5000px; 
  }

Add the property where you instance the modal

windowClass:'resizeModalDialog',

windowClass will not resize another way.

Adascript
  • 64
  • 7