position: sticky not working after Angular 15 update

Question

After angular material 15 update most of us would know that it broke a lot of CSS changes. And one of the legacy code which had sticky headers were also broken.

<div class="row">
  <div class="col-12">
    <div>
      <table id="drawItemsGrid" *ngIf="budgetService.Budget" class="table table-hover table-sm budget-table">
        <thead>
          <tr style="position: sticky; top: 0; z-index: 99999999 !important;">
            <th class="text-center" style="width: 6%;">Line #</th>
            <th style="width: 10%;">Description</th>
            <th class="text-right" style="width: 8%;">Current <br />({{budgetService.BudgetTotal.Budget | currency}})
            </th>
            <th class="text-right" style="width: 8%;">Disbursed <br />({{budgetService.BudgetTotal.Paid | currency}})
            </th>
            <th class="text-right" style="width: 10%;">Requested <br />({{budgetService.BudgetTotal.Requested |
              currency}})</th>
            <th class="text-right" style="width: 10%;">Pending <br />({{budgetService.BudgetTotal.Pending | currency}})
            </th>
            <th class="text-right" style="width: 10%;">Retention <br />({{budgetService.BudgetTotal.Retainage |
              currency}})</th>
            <th class="text-right" style="width: 8%;">Balance <br />({{budgetService.BudgetTotal.Balance | currency}})
            </th>
            <th class="text-center" style="width: 8%;">Disb + Pend</th>
            <th class="text-right" style="width: 8%;">Complete %</th>
            <th style="width: 14%;">Comments</th>
            <th style="width: 5%;text-align: center;">Borrower ({{budgetService?.totalBorrowersPendingAmount}})</th>
            <th style="width: 5%;text-align: center;">Contractor ({{budgetService?.totalContractorsPendingAmount}})</th>
            <th colspan="2" style="text-align: center;">Support<br /><span style="float: left;">I</span> <span style="float: right;">P</span></th>
          </tr>
        </thead>

score -1 · Answer 1 · answered Jun 15 '23 at 12:29

After much searching over the internet and thanks to @danday74 @Asons and ofcourse ChatGPT to get the parent element which was causing the issue. https://stackoverflow.com/a/51222156/4890272

Came with below CSS which was breaking for me.

::ng-deep .mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content {
  overflow: unset !important;
}

::ng-deep .mat-mdc-tab-body {
  overflow: unset !important;
}

::ng-deep .mat-mdc-tab-body-wrapper {
    overflow: unset !important;
}

position: sticky not working after Angular 15 update

1 Answers1