Is it possible to give the size of the modal in the options
Angular UI Bootstrap applies a conditional class to each modal based on what string is passed in as a size option to modalInstance.
<div class="modal-dialog" ng-class="size ? 'modal-' + size : ''">
You can pass in a custom string to create a class in the format modal-[yourSizeString]. Extend the default modal sizes by passing in size: 'xl'
or something similar to generate the class modal-xl
which can be styled with a custom width.
JS
myOpenFunc = function () {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'mypage.html',
size: 'xl',
controller: 'myCtrl'
});
};
CSS
.modal-xl {
width: 1200px;
}
Yes you can provide a size
key value(sm, md, lg) which interpolates to .modal-sm, .modal-md and .modal-lg
.
As stated in the angular-bootstrap documentation:
size - optional size of modal window. Allowed values: 'sm' (small) or 'lg' (large). Requires Bootstrap 3.1.0 or later
Javascript
var options = {
backdrop: false,
keyboard: true,
backdropClick: false,
templateUrl: 'a.html',
controller: 'aController',
size: 'lg' // sm, md, lg
};
var modalInstance = $modal.open(options);
If you are not satisfied with the size provided by those values, then you have two options:
[1] Add a class to the top level modal window using the windowClass
attribute and then use this class to change the respective elements via css child selectors.
[2] You can also change the template using the windowTemplateUrl
and override the default template implementation or create one yourself.