1

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

Sample application

pathe.kiran
  • 2,444
  • 1
  • 21
  • 27
  • Reason is `p-scrollPanel`, when you add more than 5 elements, it exceed height of 700px set in scrollPanel, Either use height inside p-table or always put some margin on right side – Yogen Darji Dec 14 '21 at 05:32
  • 1. how much height should i put ? in case of small devices how should decide height ? 2. where should i put margin ? can you please provide demo link. – pathe.kiran Dec 14 '21 at 06:35

1 Answers1

1

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

the Hutt
  • 16,980
  • 2
  • 14
  • 44