[英]how to overwrite ng-bootstrap datepicker element.style
我正在使用 ng-bootstrap datepicker 并遇到底部边框被切割的问题,这可能是因为应用了嵌套的 div 类,但我不想调查每个嵌套的 div 类来弄清楚,而是我想要覆盖我通过 chrome 开发工具发现的 ng-datepicker 属性(转换)导致了问题。 请查看问题的附件图片。因此,在 chrome 中,当我单击日历图标时,日期选择器显示底部边框被切碎,下面是应用的 css/属性
<ngb-datepicker class="dropdown-menu show" style="padding: 0px; position: absolute; top: 0px; left: 0px; transform: translate(0px, 28px);">
element.style {
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px, 28px);
}
在 chrome 中,当我将转换属性更改为
transform: translate(0px, -42px)
解决了这个问题。 我不想对样式进行硬编码,想要在 style.css 中定义类 angular 6 以便它应用于所有 ng-datepicker。如何覆盖此转换属性?
您可以为 ngb-datepicker 和特定样式设置类或 id。
<ngb-datepicker class="dropdown-menu show mydatepicker">
在样式.css
.mydatepicker{
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px, -42px);
}
我终于能够使用 style:css 中的 important 覆盖 ngbdatepicker,如下所示:
ngb-datepicker{
left: 0px !important;
top: 0px !important;
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
position: absolute !important;
transform: translate(0px, 28px)!important;
}
这是我的 HTML 片段
> <div class="q-datepicker position-relative w-100">
<input
formControlName="From"
class=" form-control rounded-corner bg-white primary-font-color"
placement="bottom"
placeholder=""
[minDate]=""
ngbDatepicker
#d="ngbDatepicker"
readonly=""
/>
<button
type="button"
(click)="d.toggle()"
>
<i class="far fa-calendar-alt"></i>
</button>
</div>
我添加到 div 标签“q-datepicker”类,然后在 style.css 中添加以下样式
.q-datepicker{
ngb-datepicker{
left:0 !important;
width: 350px;
.ngb-dp-months{
.ngb-dp-month{
width: 100%;
.ngb-dp-weekday{
width: 2.5rem;
margin-right: .5rem;
}
.ngb-dp-week{
.ngb-dp-day{
width: 2.5rem;
margin-right: .5rem;
div{
width: 100%;
}
}
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.