PrimeNG's Turbo Table shows scrollbars on IE11 and Edge browsers, even though [scrollable] input field is disabled

Question

I also mentioned this issue on GitHub but nobody answered yet, so I'm trying to get some help here:

I used Turbo-Table with resizable columns and with [scrollable] property set to false and my table was created with unnecessary vertical and horizontal scrollbars on Microsoft Edge and Internet Explorer 11 browsers (Chrome and FireFox handled that correctly). Does anyone has an idea how to get rid of these redundant scrollbars?

Some Environment details:

PrimeFaces version: 5.2.4 (Also occurs on last version (6-Alpha))
Browsers: Microsoft Edge 42.17134.1.0, Microsoft IE11.0.65 (Works well on Chrome and FireFox)

Steps to reproduce:

Build a simple text data table, with about 10 rows, with resizeable columns and [scrollable]="false"

Code is below:

app.component.html

<p-table [value]="cars" [resizableColumns]="true" [scrollable]="false">
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of cols" pResizableColumn>
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td *ngFor="let col of cols" class="ui-resizable-column">
        {{car[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

app.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent implements OnInit {

  constructor() {
  }

  cars: any[];

  cols: any[];

  ngOnInit() {
    this.cars = [
      {vin: '11', year: '1111', brand: 'dddd', color: 'blue', madeIn: 'Japan'},
      {vin: '12', year: '1112', brand: 'aaaa', color: 'green', madeIn: 'Germany'},
      {vin: '13', year: '1113', brand: 'cccc', color: 'yellow', madeIn: 'Japan'},
      {vin: '14', year: '1114', brand: 'dddd', color: 'blue', madeIn: 'Japan'},
      {vin: '15', year: '1115', brand: 'aaaa', color: 'green', madeIn: 'Korea'},
      {vin: '16', year: '1116', brand: 'cccc', color: 'black', madeIn: 'China'},
      {vin: '17', year: '1117', brand: 'dddd', color: 'blue', madeIn: 'USA'},
      {vin: '18', year: '1118', brand: 'aaaa', color: 'green', madeIn: 'Japan'},
      {vin: '19', year: '1119', brand: 'cccc', color: 'grey', madeIn: 'Germany'},
      {vin: '20', year: '1120', brand: 'dddd', color: 'blue', madeIn: 'France'},
    ];

    this.cols = [
      {field: 'vin', header: 'Vin'},
      {field: 'year', header: 'Year'},
      {field: 'brand', header: 'Brand'},
      {field: 'color', header: 'Color'},
      {field: 'madeIn', header: 'Made In'}
    ];
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import {TableModule} from 'primeng/table';
import {AppComponent} from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Aleksandr Neizvestnyi · Answer 1 · 2018-09-24T08:56:04.307

Using PrimeNG 6.1.0 this exact issue looks fixed. But I faced with the same issue when I use [autoLayout]="true" to make columns not fixed. The issue appears in style class ui-table-wrapper, which has style overflow-x: auto, and shows horizontal and vertical scrollbars in IE. And as a workaround I have added style class to override this behaviour in CSS:

.non-scrollable-table .ui-table-wrapper {
     overflow-x: visible !important;
}

and added this class to div before p-table tag as:

<div class="non-scrollable-table">
    <p-table
       ...
    </p-table>
</div>

This should help.

UPDATE Issue also can appear because of lack of fonts in IE11 which is used in PrimeNG components. It can be fixed by adding fonts to CSS:

*::-ms-backdrop, .ui-widget {
    font-family: "Segoe UI", "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif;
 }

Adding this fonts also can fix some other styling issues in IE11.

on PrimeNG 7.1.0 as well (I needed encapsulation: ViewEncapsulation.None for the component for this to work in angular) — makkasi, Aug 29 '19 at 07:41

score 0 · Answer 2 · answered Sep 12 '18 at 05:46

thanks for the answer! I succeeded to bypass this issue somehow by using flex:

.my-table,
.my-table .ui-table,
.my-table .ui-table-scrollable-wrapper,
.my-table .ui-table-scrollable-view,
.my-table .ui-table-scrollable-body
{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.my-table {
  ui-table-scrollable-body {
    overflow-y: auto;
  }
}

I kept the [scrollable]="true" parameter of the p-table.

The behavior I wanted was that the table's body will grow as possible according to the page size with a vertical scrollbar if necessary. I think that what solved the problem.

BTW: Write the flex definitions as I did it, Edge and Explorer doesn't understand the shortcut flex: 1 1 0

PrimeNG's Turbo Table shows scrollbars on IE11 and Edge browsers, even though [scrollable] input field is disabled

2 Answers2