[英]how to overwrite ng-bootstrap datepicker element.style
I am using ng-bootstrap datepicker and having issue that the bottom border is cutting of, it could be because of the nested div classes getting applied but I don't want to investigate each and every nested div class to figure it out, rather I want to overwrite the ng-datepicker property (transform) which I figured out thru chrome dev tools is causing issue.
我正在使用 ng-bootstrap datepicker 并遇到底部边框被切割的问题,这可能是因为应用了嵌套的 div 类,但我不想调查每个嵌套的 div 类来弄清楚,而是我想要覆盖我通过 chrome 开发工具发现的 ng-datepicker 属性(转换)导致了问题。 Please see the attached picture for the issue.so, In chrome when I click on calendar icon, the datepicker show up with bottom border chopped and below are the css/properties getting applied
请查看问题的附件图片。因此,在 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);
}
In chrome, when i change the transform property to在 chrome 中,当我将转换属性更改为
transform: translate(0px, -42px)
fixed the issue.解决了这个问题。 I don't want to hardcode the style, want to have the class defined in style.css in angular 6 so that it get applied to all the ng-datepicker.How to overwrite this transform property?
我不想对样式进行硬编码,想要在 style.css 中定义类 angular 6 以便它应用于所有 ng-datepicker。如何覆盖此转换属性?
You can set a class or id for ngb-datepicker and specific style for it.您可以为 ngb-datepicker 和特定样式设置类或 id。
<ngb-datepicker class="dropdown-menu show mydatepicker">
In style.css在样式.css
.mydatepicker{
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px, -42px);
}
I finally was able to overwrite the ngbdatepicker using.important in style:css like below:我终于能够使用 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;
}
Here is My HTML snippet这是我的 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>
I added to div tag "q-datepicker" class then add the following styles in style.css我添加到 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.