angularjsangular-ui-bootstrap

How do I increase modal width in Angular UI Bootstrap?


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?


Solution

  • 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;
                });
        };