modal not rendering to the center of the screen - html

Question

I have implemented a modal window component using angular and having issues with rendering the component to the center of the screen. It renders at different positions on different screens. I tried many solutions googling but none of them seem to have worked so far.
If you see below as per the logic when my component loads it would apply style
modal-dialog modal-lg modal-dialog-centered if the size specified is 3
Component. When i inspect the element, I can see the styles being applied
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 > 3) {
return 'modal-dialog';
} else if (this.modalSize <= 2) {
return 'modal-dialog modal-md';
} else if (this.modalSize <= 3) {
return 'modal-dialog modal-lg modal-dialog-centered ';
}
}
}
modal.scss
.modal-dialog {
max-width: 70%;
margin:5% auto;
}
.modal-content {
border-radius: 0;
}
screenshot
html markup that loads in the modal component with styles
<style>
.desc-header {
background-color: #FAE7D6;
color: black
}
.header {
width: 8%;
}
.panel-heading {
color: white;
background-color: #F59850;
border-color: #ddd;
}
.scrollClass {
height: 800px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Firm Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input
type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<form [formGroup]="frmFirm" (ngSubmit)="saveManager()">
<div *ngIf="FirmDetails && FirmDetails.Firm" class="card-body scrollClass" style="width:100%">
<div class="form-group row">
<label for="inputName" class="col-md-1 col-form-label modal-label header">Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="firmName" />
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-1 col-form-label header">Short Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.SHORT_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="shortName" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Alternate Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.ALTERNATE_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="alternateName" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Date Founded</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{dateFoundedDate}}</div>
<kendo-datepicker *ngIf="EditMode" [format]="'MMMM yyyy'" (valueChange)="dateFoundedChanged($event)" formControlName="dateFounded">
</kendo-datepicker>
</div>
</div>
<!-- <div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Intralinks Connections</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-3">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-3">
<label for="inputEmail">Password</label>
</div>
</div>
<div formArrayName="intraLinks"
*ngFor="let item of frmFirm.get('intraLinks').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-3">
<input style="width:100%" formControlName="intraUsername"
placeholder="User Name">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="intraPassword"
placeholder="Password">
</div>
<div *ngIf="EditMode" class="col-md-3">
<button class="fa fa-trash" (click)="removeCredentials()"></button>
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addCredentials()">Add Credentials</button>
</div>
</div>
</div> -->
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Key Contact</label>
<div class="col-md-3">
<div *ngIf="!EditMode && FirmDetails.People">{{FirmDetails.KeyContact.Name}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [data]="FirmDetails.People"
formControlName="People" [defaultItem]="FirmDetails.KeyContact.Name" [valuePrimitive]="true" (valueChange)="keyContactChange($event)"
[filterable]="true" (filterChange)="handleFilter($event)" textField="Name" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-3">
<label for="inputEmail">Website URL</label>
</div>
<div class="col-md-3">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-3">
<label for="inputEmail">Password</label>
</div>
</div>
<div formArrayName="websites"
*ngFor="let item of frmFirm.get('websites').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-3">
<input style="width:100%" formControlName="websiteUrl"
placeholder="Website Url">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="username" placeholder="User Name">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="password" placeholder="Password">
</div>
<div *ngIf="EditMode" class="col-md-3">
<button (click)="removeWebsite()">Remove Website</button>
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addWebsite()">Add Website</button>
</div>
</div>
</div>
<div class="form-group row">
<!-- <label for="inputEmail" class="col-md-1 col-form-label header">Addresses</label> -->
<div class="col-md-12">
<!-- <div *ngIf="!EditMode">{{FirmDetails.Firm.Addresses}}</div> -->
<!-- <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" /> -->
<div formArrayName="addressess"
*ngFor="let item of frmFirm.get('addressess').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'streetId' + i}}">Street
1</label>
<div class="col-md-9">
<input class="form-control" id="{{'streetId' + i}}" type="text"
placeholder="Street address (required)" formControlName="street">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'line2Id' + i}}">Line
2</label>
<div class="col-md-9">
<input class="form-control" id="{{'line2Id' + i}}" type="text"
placeholder="Street address (second line)" formControlName="line2">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'line3Id' + i}}">Line
3</label>
<div class="col-md-9">
<input class="form-control" id="{{'line3Id' + i}}" type="text"
placeholder="Street address (third line)" formControlName="line3">
</div>
</div>
<!-- <div class="form-group row ">
<label class="col-md-1 col-form-label header" attr.for="{{'cityId' + i}}">City, Zip
Code</label>
<div class="col-md-3">
<kendo-dropdownlist style="width:100%" [data]="cities" [valuePrimitive]="true"
formControlName="city" [filterable]="false" textField="Name"
valueField="Id"></kendo-dropdownlist>
</div>
<div class="col-md-2">
<input class="form-control" id="{{'zipCodeId' + i}}" type="number"
placeholder="Zip Code" formControlName="zipCode">
</div>
</div> -->
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'phoneId' + i}}">Line
3</label>
<div class="col-md-9">
<input class="form-control" id="{{'phoneId' + i}}" type="text"
placeholder="Phone" formControlName="phone">
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addAddress()">Add Address</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
<div class="desc-header">Firm History</div>
<div class="divEditor">
<ckeditor [editor]="Editor" [id]="'ckFirmHistory'" *ngIf="EditMode"
formControlName="firmHistory" style="font-size: 11px;" debounce="500"
[config]="EditorConfig">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FirmDetails.Firm.HISTORY_HTML">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span> <button class="btn btn-default btn mr-3">
<i class="fa fa-file-pdf-o"></i>
Download Template
</button>
</span>
<span> <button class="btn btn-default btn mr-3">
<i class="fa fa-th-large"></i>
Upload Template Data
</button>
</span>
<span *ngIf="EditMode"><button type="submit" class="btn btn-primary btn-view-all btn mr-3">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</form>
</div>
</div>

Answer 1

I believe this issue can be solved with flexbox. Check out some of the documentation and see if any of it can help you (be sure to set the container to display: flex as the answer above me said)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/