Topic: Angular MDB Bootstrap 4 Date Picker doesn't apply the styles specified

seech priority asked 2 years ago


Expected behavior I expect to be able to style the mdb-date-picker input element to change the font size, paddings and general look after adding specifically targeting the datepicker either through the component.scss file of the component using the datepicker or the general scss file of the application.

Actual behavior The styles are not applied and upon the inspection of the element in the browser, it is discovered that the css is not being parsed to the element. It is like the css file was never added. I have used ::ng-deep, added the css styles to the tags within the index.html but it still didn't detect or read the style. The baffling thing however, is that the element in the browser reads the style and the style is applied but the main input under mdb-date-picker never reads the style and is never applied.

Resources (screenshots, code snippets etc.) Here is the component itself:

<div class="md-form mt-0">
      <mdb-date-picker [inline]="true" formControlName="dob" [placeholder]="'DOB (mm/dd/yyyy)'" mdbInput
        [options]="myDatePickerOptions"></mdb-date-picker>
      <mdb-error *ngIf="f.dob.errors && f.dob.dirty || f.dob.touched && f.dob.invalid">
        <span *ngIf="f.dob.errors?.required">Your Date of Birth is required </span>
      </mdb-error>
    </div>

In the component.scss file of the component with the date picker, I used the following styles but none of them were applied to the element in the browser:

mdb-date-picker input.mydp-date.form-control {
    padding: 30px !important;
}

The style above was also added to the root styles.scss and index.html file of the project but it didn't work.

I also checked the API tab of the documentation for date picker and no styling methods were specified.

How do I apply the styles? Thank you


Arkadiusz Idzikowski staff commented 2 years ago

I just tested that using global styles (styles.scss) and component styles (with ng-deep) and I could not reproduce this problem. The padding styles were correctly added to the date picker input element.

Do you use any other custom styles that could affect this element? Could you please edit your post and provide a screenshot of the browser dev tools styles section for this input?


seech priority commented 2 years ago

I was finally able to get it to work by using ::host together with ::ng-deep. Thank you



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB4 8.0.0
  • Device: Macbook Air
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No