Primeng: Wrong height of table scrollbar in a dialog with table and other element

Question

Scrollbar of table is too high when the table is in a dialog with other elements embedded.

Look at the examples under the following link: https://stackblitz.com/edit/primeng-tablescroll-dialog?file=src/app/app.component.ts

Does anyone have any idea how this can be corrected.

Wrong:

Should be like:

Answer 1

To remove the outside scrollbar you can add to your styles.css the following:

.p-dialog-content {
  overflow-y: hidden !important;
}

If you would of used .scss instead of .css you would be able to do the same in the local component (which in your case is the app.component.scss) rather than styling in the styles.css by doing it as follows:

:host ::ng-deep .p-dialog-content {
  overflow-y: hidden !important;
}