Total Pageviews

2014/03/20

How to set the width of modal dialog

Problem
User claimed they do not want to see the scroll bar in the modal dialog.
How do I set the width of dialog manually?

Solution
We can set the modal dialog thru style.

Step1.  Defined a css style for the modal dialog in the head section of an HTML page, and using the style tag.
 <style type="text/css">  
 .fms435rTab3Dialog {  
   width: 900px;  
   left: 40%;  
 }  
 </style>  

Step2. Assign css into windowClass which is one of modal dialog's parameter
1:  $scope.create = function() {  
2:        openDialog();  
3:      };  
4:      var openDialog = function(){  
5:        var options = {  
6:            templateUrl: 'fms435rTab3Dialog.html',  
7:            controller: 'fms435rTab3Controller',  
8:            windowClass:"fms435rTab3Dialog",  
9:            backdrop: true,  
10:            keyboard: true,  
11:            backdropClick: true  
12:        };  
13:        $modal.open(options);  
14:      };  

See...the width had been adjusted.


Reference

No comments: