Изменить стиль выбора времени в основном календаре - PullRequest
Новая
       17

Изменить стиль выбора времени в основном календаре

0 голосов
/ 14 февраля 2019

Я пытаюсь убрать отступ и установить меньший стиль шрифта в таймере, используемом в календаре primeng для угловых 7. 

<p-calendar [ngModel]="xxx" timeOnly="true" [(hourFormat)]="hourFormat" [(dateFormat)]="timeFormat" [showIcon]="false"
  [style]="{'display':'initial'}" [inputStyle]="{'border-width':'1px 1px 1px 1px', 'width':'100%','height':'25px'}"></p-calendar>

, но он не применяется.

enter image description here

это рендеринг класса html для этого блока 

class="ui-timepicker ui-widget-header ui-corner-all ng-tns-c9-1 ng-star-inserted"

Я пробовал 

::ng-deep .ui-timepicker .ui-widget-header{
padding:initial;
font-size:smaller;
}

и 

::ng-deep .ui-timepicker.ui-widget-header{
padding:initial;
font-size:smaller;
}

Не работает.любые выводы будут полезны.Благодаря.

1 Ответ

0 голосов
/ 15 февраля 2019 
::ng-deep .ui-timepicker.ui-widget-header{
  padding:initial;
  font-size:smaller;
}

на самом деле работает, шрифт меньше, но отступы все те же, потому что primeng имеет: 

body .ui-datepicker .ui-timepicker {
    border: 0 none;
    border-top: 1px solid #d8dae2;
    padding: 0.857em;
}

, который имеет более высокую специфичность, чем ваш стиль.

Вы можете увеличитьспецифичность для вашего стиля: 

::ng-deep div.ui-datepicker .ui-timepicker{
  padding:initial;
  font-size:smaller;
}

Stackblitz demo

...