Ng Dialog Positioning and Calibration

Question

I am working on a popup using ngDialog. Here is the code:

<style> .ngdialog.dialogforpopup .ngdialog-content { width : 1100px; margin-top:-100px; padding-top:10px; } </style> 

Template

 <div style="height:800px;width:1040px;padding-left:5px;padding-top:5px; padding-right:5px" </div> <div class="ngdialog-buttons" style="margin-top:10px"> <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="cancel()">Cancel</button> <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="save()">Save</button> </div> 

Directive

 ngDialog.open({ template: 'editor.html', controller: 'editorController', className: 'ngdialog-theme-default dialogforpopup', closeByDocument: false, disableAnimation: true }); 

I have two questions. How to center my popup on screen? I am currently using margin-top: -100px; Is it possible to automatically configure ngDialog to my content?

thanks

Answer 1

You can center ngdialog by setting the table-like style:

 .ngdialog{ padding:0 !important; } .ngdialog-content { padding: 0 !important; background: transparent !important; display: table; /*table-like styles for vertical centering*/ width: 100% !important; height:100%; } .ngdialog-holder { display: table-cell; vertical-align: middle; width: 100%; height:100%; } .ngdialog-content > .ngdialog-close{ display:none; /*hide original close button*/ } .my-dialog{ width:400px; background:#fff; border:1px solid #000; margin:0 auto; /*center dialog horizontally*/ position: relative; } 

You also need to wrap the contents of the dialog with the ".ngdialog-holder" and ".my-dialog" blocks. Finally, place the ".ngdialog-close" button inside it.

 <div class="ngdialog-holder"> <div class="my-dialog"> Dialog content goes here <div class="ngdialog-close"></div> </div> </div> 

Here is a live example: ngdialog plunk

Answer 2

I downloaded the ngDialog package using the gazebo. therefore ngDilaog related CSS and JS files are in bower_components.

I have added the following CSS and JS files to my html page.

 <link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog.css"> <link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-default.css"> <link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-plain.css"> <script src="../bower_components/ng-dialog/js/ngDialog.js"></script> 

In my own JS file, I open the dialog as follows:

  ngDialog.open({ template : 'dialog' ,scope : $scope , className: 'ngdialog-theme-default', plain: false, showClose: true, closeByDocument: true, closeByEscape: true, appendTo: false}); 

here is the html code:

 <script type="text/ng-template" id='dialog'> <div class="ngdialog-message"> Hello!! </div> </script> 

With the above changes, I can show a popup in the center of the screen.

can use the following class to pop up.

 className: 'ngdialog-theme-plain' className: 'ngdialog-theme-default' 

Hope this helps!