CODEWITHSUNDEEP
angularprimengprimeng-calendar
AndreaNobili
AndreaNobili

Reputation: 42987

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?

Upvotes: 3

Views: 1154

Answers (2)

AndreaNobili
AndreaNobili

Reputation: 42987

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

Upvotes: 1

StPaulis
StPaulis

Reputation: 2916

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

Upvotes: 2

Related Questions