cssangular2-formsjqxwidgets

Overriding JQXWidget css style not working


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


Solution

  • 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