cssng-dialog

ngDialog positioning and sizing


I am working on a popup window using ngDialog. Here is some 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 can center my popup on the screen? Currently I am using margin-top:-100px; Is it possible to size ngDialog automatically to its content?

Thanks


Solution

  • One can center ngdialog by setting "table-like" styles:

    .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;
    }
    

    Also one need to wrap content of dialog with ".ngdialog-holder" and ".my-dialog" blocks. And finally place ".ngdialog-close" button inside of it.

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

    Here is live example: ngdialog plunk