CODEWITHSUNDEEP
cssangularprimengng-deep
GettingStarted
GettingStarted

Reputation: 7615

I can't seem to align my PrimeNG Calendar component

::ng-deep p-calendar.calendar-control > span > input.p-inputtext {
    border: 1px solid black;
    background: #eeeeee;
    text-align: center !important;
}

The text is not being aligned to the center

          <p-calendar dateFormat="mm/dd/yy" dateMask autoUnmask="true"
          [ngClass]="{'ng-invalid ng-dirty':f['tdate']?.errors &&f['tdate']?.touched}"
          formControlName="tdate" id="tdate" class="date " placeholder="mm/dd/yyyy"
          name="tdate" [(ngModel)]="dateModel" 
          [disabled]="isDisabled"              
          ></p-calendar>

text is left aligned

Upvotes: 0

Views: 727

Answers (1)

Fseee
Fseee

Reputation: 2627

Your .scss file:

:host ::ng-deep {
  .date {
    .p-inputtext {
      text-align: center;
    }
  }
}

your component:

 <p-calendar dateFormat="mm/dd/yy" dateMask autoUnmask="true"
          [ngClass]="{'ng-invalid ng-dirty':f['tdate']?.errors &&f['tdate']?.touched}"
          formControlName="tdate" id="tdate" class="date" placeholder="mm/dd/yyyy"
          name="tdate" [(ngModel)]="dateModel" 
          [disabled]="isDisabled"              
          ></p-calendar>

Upvotes: 2

Related Questions