Modal not rendering vertically and horizontally to the centre of the screen

Question

I have created a modal component in angular and need to render the modal to centre of the screen. It should be vertically and horizontally to the centre. I am have width of 95%. The height is also 95 %.

I tried many css options but no luck so far. The modal dialog tends to render towards the bottom of the screen.

Here is my code

CSS

.modal-dialog {
    margin:5% auto;
    // position: relative;
    // top: 2%;
    // transform: translateY(-2%);

    position: absolute;
    top: 50%;
    left: 50;
    transform: translate(-50%, -50%) !important;
  }

  .modal-md {
    max-width: 60%;
  }

  .modal-lg {
    max-width: 70%;
  }

  .modal-xl {

    max-width: 95%;
}

.modal-content {
   border-radius: 6px 6px 6px 6px;
}

Modal class:

import { Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges, DoCheck } from '@angular/core';
declare var $: any;
@Component({
    selector: 'shared-modal',
    templateUrl: './shared-modal.html'
})
export class SharedModal {
    _isopen = false;

    private _modalSize = 1; // 1:normal, 2: medium, 3: large
    public get modalSize() {
        return this._modalSize;
    }

    @Input()
    public set modalSize(value) {
        this._modalSize = value;
    }

    get open(): boolean {
        return this._isopen;
    }

    @Input()
    set open(val: boolean) {
        this._isopen = val;
    }
    getModalDialogClass() {
        if (this.modalSize == null || this.modalSize <= 1 || this.modalSize > 4) {
            return 'modal-dialog';
        } else if (this.modalSize <= 2) {
            return 'modal-dialog modal-md';
        } else if (this.modalSize <= 3) {
            return 'modal-dialog modal-lg';
        }  else if (this.modalSize <= 4) {
            return 'modal-dialog modal-xl';
        }
    }
}

Used in html


        
                Interaction Editor

The html that is rendered in the dialog




    



    
        
            
                {{ManagerStrategyName}}    
                {{ActivityName}}
            
            
                
            
            
                
            
        
    




    
        
            Interaction Details
        
        
            
                
                    
                        Interaction Date *
                        
                            
                        

                        
                            Available Strategies
                            
                        
                        
                            {{ExistingActivitiesTitle}}
                        
                    
                    
                        Location
                                *
                        
                            
                            
                        
                        
                            
                                
                                      {{s.MANAGERSTRATEGY_NAME}}  ({{s.INVESTMENT_STATUS}})
                            
                        
                        
                            
                                
                                    {{z.MANAGERSTRATEGY_NAME}}
                                        ({{z.INVESTMENT_STATUS}}/{{z.IS_FINALISED ? 'Finalized' : 'Draft'}})

                                
                            
                        
                    
                    
                    

                        EnTrustPermal
                                Attendees *
                        
                            
                            
                        
                        
                    
                    
                        Third Party Attendees *
                         
                        
                    
                    
                         
                    
                    
                         
                    
                    
                         
                    
                
            
        
    
    

    
        
            
                {{s.MANAGERSTRATEGY_NAME}}
            
            
                
                    
                
                
                    Meeting Notes

Tried the following options

.modal-dialog {     
      // max-width: 40%;
      //margin:5% auto;
      //  position: relative;
      // top: 2%;
      // transform: translateY(-2%);

      // position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%) !important;
      // margin: auto;
      // position: fixed; 
      // top: 5%;
      //height: 95vh;

      //  margin: 0;
      //  top: 50%;
      //  position: absolute;
      //  left: 50%;
      //  transform: translate(-50%,-50%);

      //   display: inline-block;
      //  text-align: left;
      // vertical-align: middle;

      // display: flex !important;
      // align-items: center;

      //display: none;
      // position: fixed;
      // z-index: 9999;
      // width: 100%;
      // height: 100%;
      // top: 0;
      // left: 0;

      // display: flex;
      // align-items: center; 
 }

Tom · Accepted Answer

I have resolved the issue by adding the following css

   .modal-open {
        overflow-x: hidden;
        overflow-y: auto;
      }

      .modal-dialog {
        position: relative;
        width: auto;
        margin: 10px;
      }

.modal-md {
    margin:5% auto;
    max-width: 60%;
  }

  .modal-lg {
    margin:5% auto;
    max-width: 70%;

  }

.modal-sm {
  max-width: 30%;
  margin:5% auto;

}

  .modal-xl {
    margin-top: 30px !important;
  margin-right: auto !important;
  margin-bottom: 30px !important;
  margin-left: auto !important;
  position: relative !important;
    max-width: 90%;
}

The modal-open was applied to the body tag of the html page

Modal not rendering vertically and horizontally to the centre of the screen

Answers (1)

Related Questions