primeNg table modifying container width when it has more than 5 records on tabSwitch

Question

width of container is getting increased on tab switch. but it's working fine when table has only less than 5 records.

Sample application

Answer 1

I'm removed two of the items from the p-table input and it stopped blowing out the bottom and warping the container.

<p-table [value]="[1, 2, 3, 4, 5, 6]">

to

<p-table [value]="[1, 2, 3, 4]">

Frankly, I don't understand why data displayed beyond the bottom is causing a problem.

Answer 2

The actual scrollbars, the default gray square ones, are 18px wide. PrimeNG is sweeping them under the rug by adding 18px to the height and width:

.p-scrollpanel-content {
  height: calc(100% + 18px); 
  width: calc(100% + 18px); /* extra 18px to move scroll out of boundary and hide */
  padding: 0 18px 18px 0;
  position: relative;
  overflow: auto;
  box-sizing: border-box;
}

When content doesn't overflow default scroll bar is removed by the browser thus it adds extra 18px to the content area. And contents are wider by 18px.

You need to add following CSS rule, in styles.css or anywhere it gets compiled:

.p-scrollpanel .p-scrollpanel-content {
  overflow-y: scroll !important;
}

The above rule says that always display vertical scrollbar regardless of overflow. Fixed demo