Переопределение стиля JQXWidget css не работает - PullRequest
Новая
       54

Переопределение стиля JQXWidget css не работает

0 голосов
/ 11 июля 2020

Я использую элемент управления jqxDateTimeInput из JQXWidget в форме html5. Использование Angular 7 с JQuery версии 3.1. Я хочу изменить шрифт содержимого ввода jqx только для этого компонента. Я не использую тему jqx. В моем компоненте css я попытался добавить следующее, но он не работает: 

@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;
}

Фрагмент кода компонента (это внутри элемента управления формой): 

  <jqxDateTimeInput [id]="item.id" [name]="item.id" [(ngModel)]="item.jqxDate">
  </jqxDateTimeInput>

Я проверил визуализированный элемент, и когда я обновил font-size в классе ".jqx-input-content", размер шрифта изменился, но когда я добавляю его в css, он не работает.

Кроме того, Я пробовал с [переопределением] и без него в css, но безуспешно.

Что может быть неправильным или отсутствующим здесь для обновления стиля даты и времени jqz?

Спасибо,

РДВ

1 Ответ

0 голосов
/ 28 июля 2020

Нашел решение этой проблемы - пришлось добавить стиль в global styles.s css.

У меня сработало следующее: 

.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;
}

Единственная загвоздка в том, что он должен быть сделано на глобальном уровне, что влияет на любой класс jqx-input-content-bootstrap.

Спасибо,

RDV

...