How do I increase modal width in Angular UI Bootstrap?

111

I am creating a modal:

var modal = $modal.open({
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                });

is there a way to increase its width?

This question is tagged with angularjs angular-ui-bootstrap

~ Asked on 2014-01-23 14:59:32

The Best Answer is


225

I use a css class like so to target the modal-dialog class:

.app-modal-window .modal-dialog {
  width: 500px;
}

Then in the controller calling the modal window, set the windowClass:

    $scope.modalButtonClick = function () {
        var modalInstance = $modal.open({
            templateUrl: 'App/Views/modalView.html',
            controller: 'modalController',
            windowClass: 'app-modal-window'
        });
        modalInstance.result.then(
            //close
            function (result) {
                var a = result;
            },
            //dismiss
            function (result) {
                var a = result;
            });
    };

~ Answered on 2014-01-23 15:38:55


48

Another easy way is to use 2 premade sizes and pass them as parameter when calling the function in your html. use: 'lg' for large modals with width 900px 'sm' for small modals with width 300px or passing no parameter you use the default size which is 600px.

example code:

$scope.openModal = function (size) {
var modal = $modal.open({
                templateUrl: "/partials/welcome",
                controller: "welcomeCtrl",
                backdrop: "static",
                scope: $scope,
                size: size,
            });
modal.result.then(
        //close
        function (result) {
            var a = result;
        },
        //dismiss
        function (result) {
            var a = result;
        });
};

and in the html I would use something like the following:

<button ng-click="openModal('lg')">open Modal</button>  

~ Answered on 2014-07-29 20:16:53


Most Viewed Questions: