Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

1.2K
Views
unable to override styles in primeNG with style, styleClass, inputStyle or inputStyleClass Angular-CLI

I was finally able to get primeNG working with angular-cli. In `.angular-cli.json I have:

  "styles": [
          "../node_modules/primeng/resources/themes/omega/theme.css",
          "../node_modules/primeng/resources/primeng.css",
        "styles.css"
      ],

I am trying to use the CalendarModule like so:

import {CalendarModule} from "primeng/primeng";

@NgModule({
    imports: [
        CalendarModule
    ],

In the HTML I have the following:

<p-calendar styleClass="test" [(ngModel)]="validationDate" 
inputStyleClass="test" [showIcon]="true" dateFormat="dd.mm.yy"></pcalendar>

In the component css

@Component({
    selector: 'user-validation',
    templateUrl: 'user-validation.component.html',
    styleUrls: ['user-validation.component.css']
})

user-validation.component.css

.test{
    width: 25px;
}
over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

try

/deep/ .test{
        width: 25px !important;
}

or

>>> .test{
width: 25px !important;
}
over 4 years ago · Santiago Trujillo Report

0

This worked for me -

 <p-calendar name = "calendarMod" [showIcon]="true" [(ngModel)]="actionDate"  dateFormat="mm/dd/yy" [inputStyle] = "{'width':'85px'}" ></p-calendar>
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!