Why I can't set PrimeNG p-calenar component CSS style?

user_1833945 0
Viewed 593

I am working on an Angular project using PrimeNG and I am finding the following problem trying to give the correct CSS style to a p-calendar component into my page.

Basically into my HTML code I have something like this:

<tr class="search-box">
  <th></th>
  <th>
    <p-calendar inputStyleClass="dateTimeField"  (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" placeholder="Search by Data inserimento" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'startsWith')" placeholder="Search by Name" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'company.name', 'startsWith')" placeholder="Search by Company" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'company.BU.name', 'startsWith')" placeholder="Search by BU" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.commessa.code', 'startsWith')" placeholder="Search by Commessa" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.cliente', 'startsWith')" placeholder="Search by Cliente" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.cliente_finale', 'startsWith')" placeholder="Search by Cliente Finale" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.importo_contratto', 'startsWith')" placeholder="Search by Importo Contratto" class="p-column-filter">
  </th>
  <th></th>
</tr>

As you can see the second th tag contains this p-calendar component:

<p-calendar inputStyleClass="dateTimeField"  (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" placeholder="Search by Data inserimento" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>

I am going crazy trying to set a style for this component. Differently from the other following input tag I am not able to corretly set the style (basically the width and the font size).

I was trying to do as shown here: https://forum.primefaces.org/viewtopic.php?t=2610

So into my CSS code I put:

.dateTimeField {
  width: 80% !important;
}

I also tried to set the styleClass="dateTimeField" on the p-calendar component tag and then set the:

.dateTimeField input {
  width: 80% !important;
}

but it still not working and I obtain this wrong visualization:

enter image description here

As you can see it is too large, it is not taking my CSS settings. The strange thing is that if using the Chrome tools I can set the correct width by:

input.ng-tns-c59-5.dateTimeField.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.ng-star-inserted {
    width: 80% !important;
}

but if I try to copy and paste this CSS settings into the CSS file of my Angular component still not work.

How can I try to fix this issue?

primeng-calendar primeng angular
2 Answers
user_64428410

Solved by myself...I put the style related this particular component into the CSS of the specific component global defining it as:

:host ::ng-deep {
  .dateTimeField {
    width: 80% !important;
  }
}
user_18339450
Related