Transparent background in popup

[cperezabo]

trafficstars

Hi, I updated Angular and Material to v16.2.0 and datetime-picker to v16.0.1 I don't know what changed, but I'm getting a transparent background now. Any idea?

Edit: In fact, confirmation button is missing, the popup won't close and there are no errors in console.

[AdamsContreras999]

yes for me is too same error

[cperezabo]

I updated from v9 to v16, so I don't know if this was working in v15. I would like to find where it broken

[AdamsContreras999]

in fact when all the angular dependencies were in version 16.1.0 it was working fine but angular was updated to version 16.2.0 and there it presented this error.

[tfiil]

I have also experienced the same issue after the upgrade.

However something strange I've noticed is that if I click a "normal" mat-datepicker in the same application and subsequently click the ngx-mat-datetime-picker it will be styled correctly.

If no normal datepicker pop-up has been previously shown it will be transparent.

[cperezabo]

Maybe the issue comes from Material? I haven't got time to debug it deeply. But by what you say seems that the problem can come from upstream

[francobasilico]

There are some updates on 16.2.1. https://github.com/angular/components/commit/0c4f947cdf511750b2e62f793e23b6bcc5678ab5#diff-70165fe5f110c97706ce01e94ddf46c6aad553a1c6948dabcd60b14ad6d734b6 Maybe this fix it, will try to give it a go soon

[francobasilico]

I quickly tried it persists in 16.2.1

[serg-mois-capital]

Faced the same problem. Does anybody have any workaround? It's a critical issue.

[cperezabo]

As a workaround I've added some styles globally, not all of them but enough for what I need in the meantime.

.mat-datepicker-content {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
  background-color: #fff;
  color: #000000de
}

.mat-calendar-body-selected {
  background-color: #007f51;
  color: #fff;
}

.mat-calendar-body-cell-content {
  border: none !important;
}

[serg-mois-capital]

@h2qutc need your help)

[francobasilico]

Thank you @cperezabo (gracias guacho) I've tried those and work. As you said it fix some cases, for example, I have actions and have to add extra classes. thanks for the code.

[pantonis]

Is there any fix for this planned?

[wildercarrot]

Issue still exists.

[John-Santacruz]

Please fix this issue.

[Skelyos]

Strange thing I noticed: if you open a pure Angular datepicker & then open up this datetime picker all the styles are temporarily added back in again until you refresh the page.

Not sure how useful this is but may help debug the problem.

[shivamkatyan]

I was facing the same issue, I have fixed it by adding the missing CSS

[TheDeadCode]

Still persists

[pkitatta]

Any help on this. I have the same problem.

[JUBINBIJU]

I degraded the version from 16.2 to 16.1 and then to 16.0 still its not working. Did that work for anyone?

[JUBINBIJU]

Strange thing I noticed: if you open a pure Angular datepicker & then open up this datetime picker all the styles are temporarily added back in again until you refresh the page.

Not sure how useful this is but may help debug the problem.

yes i was also able to recreate that

[AlexElin]

Could somebody provide a minimal reproducible example (MRE)?

The issue isn't reproduced at the library site. So, having the MRE would be helpful

[Klaster1]

@AlexElin please see the branch I made, you can observe the effect clearly there.

[Guerric-P]

Why this bug appears only now? It's been since Angular 11 and the deprecation of the extractCss configuration property that the styles are not bundled all together in a global CSS file, but dynamically inserted in a style tag when the component shows.

[stnor]

Another repro: https://stackblitz.com/edit/angular-cpmuqe

[stnor]

A simple workaround is to open and close a datepicker to load the styles. This isn't visible to the user. No need for global style hacks.

   //Workaround for https://github.com/h2qutc/angular-material-components/issues/348
   @ViewChild('hiddenpicker')
   private readonly hiddenpicker: MatDatepicker<null>

   ngOnInit() {
        this.hiddenpicker.open();
        this.hiddenpicker.close();
   }

[arjen-t]

The issue does exist, and version 16.x doesn't function well with Angular Material versions >= 16.*. I also encounter styling collisions when using the native Angular Material datepicker alongside the datetimepicker on the same page. Considering that in version 16.x, the default start date is broken (https://github.com/h2qutc/angular-material-components/issues/356), we addressed the issue as follows:

Downgrade to latest version 9.* to maintain support for the default startdate. Add styling to the component, scoped to the datetimepicker (ngx-mat-datetime-content), to ensure it works with Angular Material >= 16.*.

::ng-deep {
  .mat-mdc-form-field-icon-suffix {
    .mat-mdc-icon-button.mat-mdc-button-base {
      --mdc-icon-button-state-layer-size: 36px;
      width: var(--mdc-icon-button-state-layer-size) !important;
      height: var(--mdc-icon-button-state-layer-size) !important;
      padding: 6px !important;
    }
  }

  //Fix datepicker styling in ngx-mat-calendar untill we can migratet to 16.x fixed all bugs
  ngx-mat-datetime-content {
    &.mat-datepicker-content {
      box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024,
        0 1px 10px #0000001f;
      background-color: #fff;
      color: #000000de;

      .mat-calendar-body-cell {
        position: relative;
      }

      .mat-calendar-body-cell:hover {
        .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
          background-color: #258ea88d;
        }
      }

      .mat-calendar-body-selected {
        background-color: #258ea8;
        color: #fff;
      }

      .mat-calendar-body-today.mat-calendar-body-selected {
        box-shadow: inset 0 0 0 1px #fff;
      }
    }
  }
}

Considering that people invest their free time in maintaining this package, it would be greatly appreciated if the mentioned issues could be resolved. The current state is starting to feel broken.

[yousafzainasir8]

still facing this issue

[Klaster1]

@stnor I tried the open/close hack and it did not help. Even after manually opening an Angular Material date picker, the ngx-mat-datetime-picker is still missing styles.

[Nivijoy]

Overwrite the style ::ng-deep .mat-datepicker-content .mat-calendar { background-color: #c2185b; }

::ng-deep .time-container { background-color: #c2185b; }

::ng-deep .mat-calendar-body-cell-content.mat-focus-indicator { color: white; border: none; }

[geckodesalpes]

As a workaround I added some styles globally, I've not added all the styles at all, but enough for what I need in the meantime.

.mat-datepicker-content {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
  background-color: #fff;
  color: #000000de
}

.mat-calendar-body-selected {
  background-color: #007f51;
  color: #fff;
}

.mat-calendar-body-cell-content {
  border: none !important;
}

Based on your workaround, it is also possible to directly use the mat- variables in order to support theming:

.mat-datepicker-content, .time-container {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  display: block;
  border-radius: 4px;
  background-color: var(--mat-datepicker-calendar-container-background-color);
  color: var(--mat-datepicker-calendar-container-text-color);
}

.mat-calendar-body-cell-content {
  color: var(--mat-datepicker-calendar-date-text-color);
  border-color: var(--mat-datepicker-calendar-date-outline-color)
}

.mat-calendar-body-selected {
  background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
  color: var(--mat-datepicker-calendar-date-selected-state-text-color);
}

.mat-calendar-body-cell-content {
  border: none !important;
}

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
}

.mat-calendar-arrow {
  fill: var(--mat-datepicker-calendar-period-button-icon-color);
}