Search code examples
angularprimengprimeng-calendar

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

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?

Solution

  • I believe that the problem is the encapsulation.

    You should put your css rules in your global style.css, otherwise Angular by default will hide the styles of one component to another when view-encapsulation has it's default values in the components.

    That's the reason you see the ng-tns-c59-5 inside your dev tools.

    See that example: https://stackblitz.com/edit/p-calendar-svpn8n?file=src/styles.css

    For more info: https://angular.io/api/core/ViewEncapsulation