Angular Material Datepicker Design Issue When Opening Calendar

I am having an issue when using Angular Material Datepicker and I can't seem to find the root problem of it. I couldn't think of a way to word this question. Whenever I open the ca

Solution 1:

I think you have your custom css for table class like

table-layout: fixed;
width: 150%;

Angular date picker is also internally using the table structure. so it override's the css of the angular material classes.

so in your custom css table exclude the class 'mat-calendar-table' by using :not class.

check below styles.css file for your reference check here