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

Question

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:

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?

score 2 · Accepted Answer · answered Aug 18 '20 at 11:07

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

score 1 · Answer 2 · answered Aug 18 '20 at 12:30

1

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

answered Aug 18 '20 at 12:30

AndreaNobili

40,955
107
324
596

Didn't the answer above satisfied your needs? – StPaulis Aug 18 '20 at 12:31
@StPaulis I used this other way that in some way is based also on your answer... I think that in this way I handle better the CSS style because I want avoid to modify the global style for a style that is related only to a specific component. If you add my solution to your question I will be happy to accept it :-) – AndreaNobili Aug 18 '20 at 12:34
It is OK... I just wanted to know If there was a problem with my solution. I understand your point of you, you could play with the encapsulation of your component, to avoid `:host` and `::ng-deep` and have your styles inside your component as you want. Thank you for your quick response. – StPaulis Aug 18 '20 at 12:39
1

@StPaulis in any case I accepted your ansewr because I had the inspiration reading it (I am not a real frontender...more a backender...when I read it I undertood the cause of the error and how I fixed something similar in the past – AndreaNobili Aug 18 '20 at 12:42

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

2 Answers2