Topic: Input labels and Timepicker
Hi,
We want to customize the style of the date and time picker as shown in attachment. We manage to customize the input field, but when we open the date or time picker, the input label is displayed on top of the time picker (see Attachment 1 and Attachment 2).
We tried to change the timepicker z-index, but the input field z-index changed as well. Is there a way to change the z-index of the time and date picker componant without changing the z-index of the input field ?
Have you another idea on how to do this ?
Thanks.
// styles.scss
@import "variables";
.picker .form-control {
border: solid;
border-width: 2px;
border-radius: 4px;
border-color: $gray-transparent;
color: $blue;
padding: 16px 0px 16px 14px;
font-family: $font-family;
font-size: $font-size-basic !important;
font-style: $font-style-basic;
width: 82px !important;
height: 20px !important;
margin-right: 20px;
position: relative;
z-index: 0;
&:focus {
border-color: $blue !important;
}
}
.md-form input[type=text] {
border: solid;
border-width: 1px;
border-radius: 4px;
border-color: $gray-transparent;
color: $blue;
padding: 16px 0px 16px 14px;
font-family: $font-family;
font-size: $font-size-basic !important;
font-style: $font-style-basic;
height: 20px !important;
&:focus {
border-color: $blue !important;
}
}
.pickerTime .md-form input[type=text] {
width: 46px !important;
padding: 16px 0px 16px 10px !important;
}
.date-time-error .md-form input[type=text] {
border-color: $red;
border-width: 2px;
}
.date-time-error .form-control {
border-color: $red;
border-width: 2px;
}
.legend {
margin-top: -87px;
margin-left: 5px;
padding: 0 4px 0 4px;
font-family: $font-family;
font-size: 12px;
color: $gray-transparent;
background-color: $white;
position: absolute;
z-index: 10001;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
#datePickerLegend {
margin-top: -93px;
}
}
.container {
&:focus-within {
.legend {
z-index: 0;
}
}
}
.selector .picker__holder {
position: relative;
z-index: 10002;
height: 100%;
}
// component.html
<div id="date-time-box" class="container ">
<!-- Date picker | MDB Angular Pro -->
<div class="mdbPicker datePickerr" id="date">
<mdb-date-picker class="pickerDate" [(ngModel)]="dateSelected" name="mydate"
[options]="datePickerOptions" [placeholder]="'Selected date'"
[locale]="'en'">
</mdb-date-picker>
<div class="legend" id="datePickerLegend">{{'datepicker.label' | translate}}</div>
</div>
<!-- Time picker | MDB Angular Pro -->
<div class="mdbPicker timePickerr" id="time">
<mdb-time-picker class="pickerTime" name="mytime" [buttonLabel]="'Done'" [twelvehour]="false"
[darktheme]="false" [placeholder]="timeSelected" [(ngModel)]="timeSelected">
</mdb-time-picker>
<div class="legend">{{'timepicker.label' | translate}}</div>
</div>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes