I am using jqxDateTimeInput control from JQXWidget in html5 form. Using Angular 7 with JQuery version 3.1. I want to change the font of jqx input content, only for this component. I am not using any jqx theme. In my component css i tried adding the following, but it is not working:
@import "jqwidgets-awf/jqwidgets/styles/jqx.base.css";
[override] .jqx-widget-content{
font-size: medium;
font-style: oblique;
background-color: red($color: #000000);
}
[override] .jqx-input-content{
font-size: 20px;
}
Component code snippet (this is inside form-control):
<jqxDateTimeInput [id]="item.id" [name]="item.id" [(ngModel)]="item.jqxDate">
</jqxDateTimeInput>
I inspected the rendered element, and when I updated font-size on class ".jqx-input-content", font size did change, but when I add it to css, it is not working.
Also, I tried with and without [override] in css, but no success.
What could be incorrect or missing here to update jqz date time style?
Thanks,
RDV
Found solution to this problem - had to add style in global styles.scss.
Below worked for me:
.jqx-input-bootstrap {
height: 40px !important;
}
.jqx-input-content-bootstrap {
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
padding: 0.375rem 0.75rem;
}
The only catch is that it has to be done at global level which impacts any jqx-input-content-bootstrap
class.
Thanks,
RDV