angular - Mat Date Picker overflows when opened

Question

In my Angular project I use mat date picker in multiple places. Recently I started see this issue(not sure what caused it), mat date picker overflows when opened. I see this issue across the application not just at one place. Not sure how to describe it, attaching the screen shot for reference. I couldn't reproduce this in StackBlitz as this is specific to my application. I am using Angular and Material 11.1.2

Update: After digging further, I figured out mat-calendar-table class is actually crossing the boundaries and causes overflow

question from:https://stackoverflow.com/questions/66049716/mat-date-picker-overflows-when-opened

Answer 1

Based on this issue adding table-layout: fixed; to table tag in styles.scss file fixed my issues

table
{
  table-layout: fixed !important;
  width: 100% !important; 
}

If you also use mat-table and you don't want mat-table layout to be fixed, add the following css to styles.scss

table
{
  table-layout: fixed !important;
  width: 100% !important;
}

.mat-table
{
  table-layout: auto !important;
  width: 100% !important;
}