Vertically center date and time pickers

Thanks Damian:   Here’s the screenshot: https://screencast.com/t/pohOtOiWZtq Note that the date and time pickers are in a modal: <ng-template #modalEditPoll> <div mdbModal #content=”mdb-modal” style=”overflow: auto;” class=”modal” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel” aria-hidden=”true”> <div class=”modal-dialog modal-lg” role=”document”> <div class=”modal-content”> <div class=”modal-header”> <h4 class=”modal-title” id=”exampleModalLabel”>Poll Properties</h4> <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close” (click)=”content.hide()”> <span aria-hidden=”true”>×</span> </button> </div> <div class=”modal-body mx-4 my-3″ *ngIf=”pollUI”> <form *ngIf=”active” [formGroup]=”aForm” (ngSubmit)=”onVerify(aForm.value)”> <formMsg [form]=”aForm”></formMsg> <!– <div class=”md-form”> <input mdbActive type=”text” id=”l_pollId” readonly=”readonly” [formControl]=”aForm.controls[‘pollId’]” class=”form-control”> <label for=”l_pollId” class=””>Poll Id</label> </div> <controlMsg [form]=”aForm” [field]=”‘pollId'”></controlMsg> –> <div class=”md-form”> <input mdbActive type=”text” id=”l_pollTitle” [formControl]=”aForm.controls[‘pollTitle’]”> <label for=”l_pollTitle” class=””>Title <span class=”text-danger”>*</span></label> </div> <controlMsg [form]=”aForm” [field]=”‘pollTitle'”></controlMsg> <div class=”row mt-2″> <div class=”col-3″> <label for=”l_openDate”>Poll opens</label> <mdb-date-picker id=”l_openDate” [placeholder]=”‘MM-DD-YYYY'” [formControl]=”aForm.controls[‘openDate’]”> </mdb-date-picker> <controlMsg [form]=”aForm” [field]=”‘openDate'”></controlMsg> </div> <div class=”col-3″ style=”padding-top: 30px”> <mdb-time-picker [buttonlabel]=”‘Done'” [twelvehour]=”false” [darktheme]=”false” [placeholder]=”‘HH:MM'” [label]=”‘at'” [formControl]=”aForm.controls[‘_openDate’]”> </mdb-time-picker> </div> <div class=”col-3″> <label for=”l_closeDate”>Poll closes</label> <mdb-date-picker id=”l_closeDate” [placeholder]=”‘MM-DD-YYYY'” [formControl]=”aForm.controls[‘closeDate’]”> </mdb-date-picker> <controlMsg [form]=”aForm” [field]=”‘closeDate'”></controlMsg> </div> <div class=”col-3″ style=”padding-top: 30px”> <mdb-time-picker [buttonlabel]=”‘Done'” [twelvehour]=”false” [darktheme]=”false” [placeholder]=”‘HH:MM'” [label]=”‘at'” [formControl]=”aForm.controls[‘_closeDate’]”> </mdb-time-picker> </div> </div> <div class=”md-form”> <input mdbActive type=”text” id=”l_topgifUrl” [formControl]=”aForm.controls[‘topgifUrl’]”> <label for=”l_topgifUrl” class=””>Banner URL (URL of a .gif or a .jpg file)</label> <small>To be used instead of the standard “Poll/Survey Manager” banner when displaying the poll</small> </div> <controlMsg [form]=”aForm” [field]=”‘topgifUrl'”></controlMsg> <div class=”md-form”> <textarea mdbActive type=”text” id=”l_preText” rows=”2″ [formControl]=”aForm.controls[‘preText’]” class=”form-control md-textarea md-textarea-auto”></textarea> <label for=”l_preText” class=””>Introductory Text</label> </div> <controlMsg [form]=”aForm” [field]=”‘preText'”></controlMsg> <div class=”md-form”> <textarea mdbActive type=”text” id=”l_postText” rows=”2″ class=”md-textarea md-textarea-auto” [formControl]=”aForm.controls[‘postText’]”></textarea> <label for=”l_postText” class=””>Completion Text</label> </div> <controlMsg [form]=”aForm” [field]=”‘postText'”></controlMsg> <div class=”md-form mt-2″> <input mdbActive type=”text” id=”l_endpollUrl” class=”” [formControl]=”aForm.controls[‘endpollUrl’]”> <label for=”l_endpollUrl” class=””>Poll End Redirect URL</label> <small>URL to which the user will be directed upon completion of the poll</small> </div> <controlMsg [form]=”aForm” [field]=”‘endpollUrl'”></controlMsg> <!– <div class=”md-form”> <input mdbActive type=”text” id=”l_customPollUrl” class=”form-control” [formControl]=”aForm.controls[‘customPollUrl’]”> <label for=”l_customPollUrl” class=””>Custom poll URL</label> </div> <controlMsg [form]=”aForm” [field]=”‘customPollUrl'”></controlMsg> –> <!–TODO: this.questSetNums = 0; // number of quest sets for particular pollId and scriptId.–> <div class=”md-form”> <input mdbActive type=”number” id=”l_timeLimit” class=”form-control” [formControl]=”aForm.controls[‘timeLimit’]”> <label for=”l_timeLimit” class=””>Time limit (minutes)</label> </div> <controlMsg [form]=”aForm” [field]=”‘timeLimit'”></controlMsg> <label>Anonymity of Poll Responses <span class=”text-danger”>*</span></label> <!–TODO: initial value is not set–> <div class=”form-check” *ngFor=”let desc of aForm.pollMeta.anonymity.desc; let index = index”> <input id=”l_anonymity_{{index}}” type=”radio” value=”{{index}}” name=”l_anonymity” mdbWavesEffect [formControl]=”aForm.controls[‘anonymity’]”> <label for=”l_anonymity_{{index}}”>{{desc}}</label> </div> <controlMsg [form]=”aForm” [field]=”‘anonymity'”></controlMsg> <label>Other</label> <div class=”form-check”> <input type=”checkbox” class=”filled-in” id=”l_multipleResponsesFlag” class=”form-check-input” [formControl]=”aForm.get(‘_taking.multipleResponsesFlag’)”> <label for=”l_multipleResponsesFlag”>Respondent may answer the poll more than once</label> </div> <controlMsg [form]=”aForm” [field]=”‘_taking.multipleResponsesFlag'”></controlMsg> <div class=”form-check” style=”padding-left: 3.4rem;”> <input type=”checkbox” class=”filled-in” id=”l_pollResponseEditableFlag” class=”form-check-input” [formControl]=”aForm.get(‘_taking.pollResponseEditableFlag’)”> <label for=”l_pollResponseEditableFlag”>Respondent may edit poll response any time after submitting it (until the poll closes)</label> </div> <controlMsg [form]=”aForm” [field]=”‘_taking.pollResponseEditableFlag'”></controlMsg> <controlMsg [form]=”aForm” [field]=”‘_taking'”></controlMsg> <div class=”form-check”> <input type=”checkbox” class=”filled-in” id=”l_mustAnswerAllFlag” class=”form-check-input” [formControl]=”aForm.controls[‘mustAnswerAllFlag’]”> <label for=”l_mustAnswerAllFlag”>Taker must answer all questions</label> </div> <controlMsg [form]=”aForm” [field]=”‘mustAnswerAllFlag'”></controlMsg> <div> <div class=”form-check”> <input type=”checkbox” class=”filled-in” id=”l_hasCorrectAnswersFlag” class=”form-check-input” [formControl]=”aForm.controls[‘hasCorrectAnswersFlag’]”> <label for=”l_hasCorrectAnswersFlag”>Author provides correct answers</label> <controlMsg [form]=”aForm” [field]=”‘hasCorrectAnswersFlag'”></controlMsg> </div> <div class=”form-check” style=”padding-left: 3.4rem;”> <input type=”checkbox” class=”filled-in” id=”l_selfTestFlag” class=”form-check-input” [formControl]=”aForm.controls[‘selfTestFlag’]”> <label for=”l_selfTestFlag”>Taker can see answers after poll submission</label> <controlMsg [form]=”aForm” [field]=”‘selfTestFlag'”></controlMsg> </div> </div> <div class=”form-check”> <input type=”checkbox” class=”filled-in” id=”l_scriptRequiredFlag” class=”form-check-input” [formControl]=”aForm.controls[‘scriptRequiredFlag’]”> <label for=”l_scriptRequiredFlag”>Script required</label> </div> <controlMsg [form]=”aForm” [field]=”‘scriptRequiredFlag'”></controlMsg> <div class=”md-form”> <input name=”resultsAvailableFlag” type=”checkbox” class=”filled-in form-check-input” id=”l_resultsAvailableFlag” [formControl]=”aForm.controls[‘resultsAvailableFlag’]”> <label for=”l_resultsAvailableFlag”>Taker can see poll results</label> </div> <controlMsg [form]=”aForm” [field]=”‘resultsAvailableFlag'”></controlMsg> <div [hidden]=”!aForm.controls[‘resultsAvailableFlag’].value”> <div class=”row”> <div class=”col-6″> <!– <label for=”l_resultsDate”>Date and time when taker can see poll results</label>–> <mdb-date-picker id=”l_resultsDate” [placeholder]=”‘Poll results date'” readonly=”!aForm.controls[‘resultsAvailableFlag’].value” [formControl]=”aForm.controls[‘resultsDate’]”> </mdb-date-picker> </div> <div class=”col-6″> <mdb-time-picker [buttonlabel]=”‘Done'” [twelvehour]=”false” [darktheme]=”false” [placeholder]=”‘Selected time'” [label]=”‘at'” [formControl]=”aForm.controls[‘_resultsDate’]”> </mdb-time-picker> </div> </div> <div class=”col-12″> <controlMsg [form]=”aForm” [field]=”‘resultsDate'”></controlMsg> </div> </div> </form> </div> <div class=”modal-footer”> <button type=”button” class=”btn btn-secondary waves-light” data-dismiss=”modal” (click)=”close()” mdbRippleRadius> Close </button> <button type=”button” class=”btn btn-primary waves-light” mdbRippleRadius [disabled]=”aForm && aForm.invalid” (click)=”onSubmit(aForm.value, aForm)”>Save </button> </div> </div> </div> </div> </ng-template> <ng-container *ngTemplateOutlet=”modalEditPoll”></ng-container>

---