Issue
I want to change this input's size
here .html component
<div class="time-picker" dir="ltr">
<ngx-timepicker-field [defaultTime]="'00:00'" [format]="24" [clockTheme]="theme"></ngx-timepicker-field>
</div>
here .ts component
import { NgxMaterialTimepickerTheme } from 'ngx-material-timepicker';
theme: NgxMaterialTimepickerTheme = {
container: {
bodyBackgroundColor: '#25bcbd',
buttonColor: '#fff',
},
dial: {
dialBackgroundColor: '#4fcbcc',
},
clockFace: {
clockFaceBackgroundColor: '#e6e7e8',
clockHandColor: '#25bcbd',
clockFaceTimeInactiveColor: '#4f5757',
},
};
I searched and didn't find the solution!
Solution
There is no configuration in the documentation, instead go for custom CSS solution like so.
.custom-timepicker-css {
.timepicker-dial__container {
margin-top: 20px;
}
.timepicker-dial__control {
font-size: 20px !important;
width: 30px !important;
}
.timepicker-dial__time {
font-size: 20px !important;
}
}
html
<ngx-mat-timepicker
timepickerClass="custom-timepicker-css"
#timepicker
[enableKeyboardInput]="true"
[max]="maxTime"
[min]="minTime"
></ngx-mat-timepicker>
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.