Unable to get prime-ng table pagination dropdown to hover over everything

Question

I have been using mat-tab in conjunction with prime-ng table and have been trying really hard to make sure that pagination drop down number doesn't get clipped off as seen in the image below.

I have checked and made sure that the pagination dropdown has the highest z-index, but haven't gotten any success so far. Any help and suggestions would be appreciated.

.mat-tab-label.mat-tab-label-active {
  background-color: #105b63;
  color: #fff;
  /* border: 1px solid lightgray;  */
  padding: 15px 25px;
  border-radius: 5px 5px 5px 5px;
}

.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background: #105b63;
  height: 0px;
}


/* .mat-tab-body.mat-tab-body-active,
.mat-tab-body,
.mat-tab-body-content,
.mat-tab-body-wrapper {
  overflow: inherit !important;
} */

.example-loading-shade {
  position: absolute;
  top: 0%;
  left: 0%;
  bottom: 0px;
  right: 0%;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-progress-spinner circle,
.mat-spinner circle {
  stroke: #105b63;
}

.red-box-outlining {
  display: inline-block;
  padding: 10px 20px 20px;
  border: 1px solid #bd4932;
  border-radius: 5px;
  margin: 15px 15px 20px 15px;
  width: 228px;
}

.messages-service-logo {
  width: 135px;
  padding: 5%;
}

.listContainer {
  padding: 20px;
}

:host ::ng-deep .p-dropdown-panel {
  transform-origin: center bottom !important;
  top: -119px !important;
  left: 0 !important;
}

.pageOperationsBtns {
  display: flex;
  justify-content: end;
}

.pageOperationsBtns>.addVoiceMsgBtn {
  border: 2px solid #105b63;
  color: white;
  background-color: #105b63;
  font-weight: 500;
  padding: 0.3rem 1rem;
  margin: 8px 3px;
  /* float: right; */
}

.pageOperationsBtns>.addTextMsGBtn {
  border: 2px solid #105b63;
  color: white;
  background-color: #105b63;
  font-weight: 500;
  padding: 0.3rem 1rem;
  margin: 8px 3px;
  /* float: right; */
}

@media screen and (max-width: 500px) {
  .pageOperationsBtns {
    justify-content: center;
  }
  .pageOperationsBtns>.addVoiceMsgBtn,
  .pageOperationsBtns>.addTextMsGBtn {
    font-size: 0.85rem;
  }
}

@media screen and (max-width: 40rem) {
  .listContainer {
    padding: 0;
  }
}

<p-toast [baseZIndex]="10000"></p-toast>
<diV>
  <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>
</diV>
<div class="main" style="height: 100%;">
  <div class="container-fluid">
    <div>
      <h2 style="color: #105B63;">
        <!--<i class="fa fa-sliders"></i>-->
        <img id="ManageMsgIcon" src="./../../../assets/Images/manage msg.png" alt="Manage Messages" style="width: 25px; vertical-align: initial;"> Manage Messages
      </h2>
      <div class="row">
        <div class="col-sm-12">
          <!-- <div style="text-align: center;">
                        <div class="page-operations-container">
                            <img id="VoiceMsgIcon" src="./../../../assets/Images/create voice.png" alt="Voice Message" class="messages-service-logo">
                            <br />
                            <a routerLink="" (click)="onCreateVoice()" [routerLinkActive]="['router-link-active']" class="btn btn-secondary"  title="Create Voice Messages"><i class="fa fa-bullhorn"></i> Create Voice Message</a>
                        </div>
                        <div class="page-operations-container">
                            <img id="TextMsgIcon" src="./../../../assets/Images/create text.png" alt="Text Message"class="messages-service-logo">
                            <br />
                            <a routerLink="" (click)="onCreateMessage()" [routerLinkActive]="['router-link-active']" class="btn btn-secondary"  title="Create Text Messages"><i class="fa fa-comment"></i> Create Text Message</a>
                        </div>
                    </div> -->
          <div class="pageOperationsBtns ">
            <button type="button" (click)="onCreateVoice()" class="btn btn-lg addVoiceMsgBtn" style="font-size: 14px;">
                        <i class="fa fa-bullhorn fa-lg" style="margin-right: 6px;"></i>Create Voice Message
                      </button>
            <button type="button" (click)="onCreateMessage()" class="btn btn-lg addTextMsGBtn" style="font-size: 14px;"> <i class="fa fa-comment fa-lg" style="margin-right: 6px;"></i>Create Text Message</button>
          </div>
        </div>
      </div>
      <div>

        <mat-tab-group mat-stretch-tabs class="example-stretched-tabs" [selectedIndex]="Tabs.value" (selectedIndexChange)="onTabChange($event)">
          <mat-tab>
            <div class="example-loading-shade" *ngIf="isLoadingResultsVoice">
              <mat-spinner *ngIf="isLoadingResultsVoice"></mat-spinner>
            </div>
            <ng-template mat-tab-label>
              <i class="fa fa-bullhorn fa-lg"></i>
              <span style="margin-left:5px;">Voice Messages</span>
            </ng-template>
            <div style="border: 1px solid lightgray;">
              <div class="listContainer">
                <app-voice-list [$dataSource]="dataSourceVoice" [$SelectedData]="SelectedDataVoice" [$Type]="TypeVoice" [$cols]="colsVoice" (OutputSelectedData)="onSelectedDataVoice($event)" (OutputViewVoice)="onViewVoice($event)" (OutputDeleteVoice)="onDeleteVoice($event)"
                  (OutputPaginationNumberVoice)="paginationNumberChangeVoice($event)">
                </app-voice-list>
                <!-- <app-table-selection-tile [messagetype]="'Voice Message'"
                                                [$TotalSelected]="TotalSelectedVoice">                        
                      </app-table-selection-tile> -->
              </div>

            </div>
          </mat-tab>

          <mat-tab>
            <div class="example-loading-shade" *ngIf="isLoadingResultsText">
              <mat-spinner *ngIf="isLoadingResultsText"></mat-spinner>
            </div>
            <ng-template mat-tab-label>
              <i class="fa fa-comment fa-lg"></i>
              <span style="margin-left:5px;">Text Messages</span>
            </ng-template>
            <div style="border: 1px solid lightgray;">
              <div class="listContainer">
                <app-text-list [$dataSource]="dataSourceText" [$SelectedData]="SelectedDataText" [$Type]="TypeText" [$cols]="colsText" (OutputSelectedData)="onSelectedDataText($event)" (OutputEditText)="onEditText($event)" (OutputDeleteText)="onDeleteText($event)" (OutputPaginationNumberTxtMsg)="paginationNumberChangeTxtMsg($event)">
                </app-text-list>
                <!-- <app-table-selection-tile [messagetype]="'Text Message'"
                                                [$TotalSelected]="TotalSelectedText">
                      </app-table-selection-tile> -->
              </div>
            </div>
          </mat-tab>
        </mat-tab-group>
      </div>
    </div>

  </div>
</div>

Answer 1

try working with primeng documentation they use

<p-table
      [paginator]="true"
      [rows]="6"
      [rowsPerPageOptions]="[6, 10, 20]" >