Topic: Vertically center date and time pickers
I have a longer form that uses the date and timepicker. When activated the widget appears all the way up and not in the center of the screen. How can I set 'body' as its parent container? Thanks.
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>
Damian Gemza staff commented 6 years ago
Dear robsilva, Thanks for your report! We'll take a look at this and we'll fix it in future releases. As a workaround, please use this styles in your styles.scss file: .mydp-date { height: 24px !important; } It will center vertically your date and time pickers. Best Regards, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
robsilva pro commented 6 years ago
Can anyone shed some light on this please?Damian Gemza staff commented 6 years ago
Dear robsilva, Could you please show me your code, and add some screenshots of actual behavior? Best Regards, Damian