我为p日历组件使用primeng'7.0.0'。当我单击日期选择器图标时,日历组件正在向上打开(下面的图片)。
我想减小此组件的宽度和高度。我尝试了下面的代码,但是没有用。
calendar.html
<p-calendar
value="#{property.propDate}" id="date"
[showIcon]="true"
[utc]='true'
(onSelect)="sendCalendarTimeValueToParent()"
placeholder="{{ timePickerPlaceHolder }}"
[showTransitionOptions]="'100ms'"
[hideTransitionOptions]="'100ms'"
[inputStyle]="{ width: '100px' }"
[(ngModel)]="value"
[defaultDate]="defaultDate"
showTime="true"
[readonlyInput]="true"
hourFormat="24"
showButtonBar="true"
[clearButtonStyleClass]="'clear-button'"
[timeOnly]="true">
</p-calendar>
calendar.css
.ui-calendar .ui-datepicker {
height : 200px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0px;
}
谁能告诉我我在做什么错吗?
我已经看过这个日历的CSS了,我可以告诉你。
1。如果要限制宽度,可以在.ui-datepicker
类中进行设置,因为它是在此处暴露的。您可以做一些奇迹(css休息一段时间后),但是有一些。
.ui-calendar .ui-datepicker {
width: 15em;
}
2。您可以通过这种方式影响身高。该实现是通过伪:: before元素完成的,该元素在计算中不占用任何空间。您需要它来限制所说元素的高度。我设法做到的是通过这种方式限制小时/分钟选择器的填充:
.ui-timepicker {
padding: 0px !important;
}
通常,当内部元素占据标准高度而不是父元素的百分比时,您不能限制内部元素的高度。