CODEWITHSUNDEEP
javascriptangularjsmodal-dialogangular-uiangular-ui-bootstrap
JCompagner
JCompagner

Reputation: 51

Angular-ui modal window, how to set the size the modal dialog through a style (css class windowClass can't be used)

i override the template:

$templateCache.put("template/modal/window.html",
                "<div tabindex=\"-1\" class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10, display: 'block'}\">\n" +
                "    <div class=\"modal-dialog\" ng-style=\"formSize\"><div class=\"modal-content\" ng-style=\"formSize\" ng-transclude></div></div>\n" +
                "</div>");

the only thing i add is the 2 ng-style on the dialog and the content stuff (and i have removed the click that will dismiss the dialog that is something we don't need/want)

the $modal.open call gets a resolve

resolve: {
 formSize: function() {
  return {width:'680px',height:'520px'}
                        }
}

the controller of the modal dialog gets that:

controller("DialogInstanceCtrl", function ($scope, $modalInstance,formSize) {
    $scope.formSize =formSize;

and assigns it to its scope.

This doesn't work ofcourse because the modal template gets its stuff rom another scope (the one that the modalWindow directive creates)

so i just make my own directive with the same name:

.directive('modalWindow', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {
        }
      };
}]

But that scope is now exactly the same scope as the controller one. i can't add scope: {} or scope: true to that directive because then angular complains about 2 directives asking for the same scope

Problem is that i kind of want to extend the default boostrap-ui modalWindow directive.. So i really want that same isolated scope so that i can add stuff.

the only way i got it working was doing this:

.directive('modalWindow', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {
          scope.$$childHead.formSize = scope.formSize; 
        }
      };
}]

Is there any other way? I can't use the windowClass css style. Because the size is completely dynamic an controlled from data coming from a server.

Upvotes: 0

Views: 7223

Answers (4)

Tu Duong
Tu Duong

Reputation: 1

 $scope.showViewPhotoDialog = function (albumIndex, photoIndex) {
                var modalInstance = $modal.open({
                    templateUrl: 'views/page.html',
                    controller: "PageCtrl",
                    size: 'lg'
});

size: 'lg' or 'sm'

Upvotes: 0

kali sharma
kali sharma

Reputation: 331

In order to use windowClass, you can do something like this

modalInstance = $modal.open({
    templateUrl : 'templates/loadingdialog.html',
    backdrop : 'static',
    windowClass : 'loading-spinner-modal'
});

Upvotes: 0

Alex Arvanitidis
Alex Arvanitidis

Reputation: 4464

The best workaround I found is to set different parent classes for each .modal-dialog e.g. 

/* MODALS */
.parent .modal-dialog{
    width:80%;
}
.parentbig .modal-dialog{
    width:50%;
}
.parent3 .modal-dialog{
    width:80%;
}

and then set the windowClass parameter to the parent that you need. Then you can dynamically select the dialog and set its size with jQuery etc.

$(".parent2 .modal-dialog").css("width","20%")

Upvotes: 0

lucassp
lucassp

Reputation: 4167

A workaround would be to add the incoming server styles in the DOM before displaying the modal:

$('html head').append('<style id="myUniqueStyleId">.uniqueModalClass { /* dialog styles */ }</style>');

This can be done similar to:

    if ($("myStyleId").length) {
        $modal.open({windowClass: "uniqueModalClass"});
    } else {
        $http.get("/styles/styleId").then(function (data) {
            $('html head').append('<style id="' + data.data.styleId + '">' + data.data.style + '</style>');
            $modal.open({windowClass: "uniqueModalClass"});
        })
    }

Upvotes: 1

Related Questions