It seems to happen more when the browser is made wider. If you resize the browser, the scroll bars will pop in and out as you shrink and widen the window.
I'm using lazy loading, static columns and NO fixed widths for the table nor the columns. The table's settings in which I see this happen are:
The problem does not occur if autolayout=false. I have not tested to see if the rows, lazy loading and paging have any effect.[autolayout]=true
[rows]= XX
[lazy]=true
[alwaysShowPaginator]="false"
[paginator]="true"
It even happens if there are no records in the table.
This doesn't happen in Chrome, nor Firefox. I have not tested other browsers.
I found two workarounds:
1) The following custom scss style which removes the scroll bars from the table:
2) set [scrollable]=true, which is counter intuitive. This forces the table to use the ui-table-scrollable-wrapper class which does not have the above problem.ui-table-auto-layout > .ui-table-wrapper {
overflow: hidden !important;
}
I think the correct solution is to remove the following style from the control:
.ui-table-auto-layout > .ui-table-wrapper {
overflow-x: auto;
}