Турбо-таблица PrimeNG показывает полосы прокрутки в браузерах IE11 и Edge, хотя поле ввода [scrollable] отключено

Question

Я также упоминал эту проблему на GitHub, но никто еще не ответил, поэтому я пытаюсь получить помощь здесь:

Я использовал Turbo-Table с изменяемыми размерами столбцов и со свойством [scrollable], установленным в false, и моя таблица была создана с ненужными вертикальными и горизонтальными полосами прокрутки в браузерах Microsoft Edge и Internet Explorer 11 (Chrome и FireFox обрабатывали это правильно). У кого-нибудь есть идеи, как избавиться от этих избыточных полос прокрутки?

Некоторые подробности об окружающей среде:

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)

Шаги для воспроизведения:

Создание простой таблицы текстовых данных, содержащей около 10 строк, с изменяемыми размерами столбцов и [scrollable] = "false"

Код ниже:

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 { }

Answer 1

спасибо за ответ! Мне удалось как-то обойти эту проблему с помощью 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;
  }
}

Я сохранил параметр [scrollable]="true" в p-таблице.

Мне хотелось, чтобы тело таблицы увеличивалось в зависимости от размера страницы с вертикальной полосой прокрутки, если это необходимо. Я думаю, что это решило проблему.

Кстати: напишите определения flex, как я это сделал, Edge и Explorer не понимают, что такое flex: 1 1 0

Answer 2

При использовании PrimeNG 6.1.0 эта проблема выглядит исправленной. Но я столкнулся с той же проблемой, когда использую [autoLayout]="true", чтобы сделать столбцы не исправленными. Проблема появляется в классе стиля ui-table-wrapper, который имеет стиль overflow-x: auto, и показывает горизонтальные и вертикальные полосы прокрутки в IE. И в качестве обходного пути я добавил класс стиля, чтобы переопределить это поведение в CSS:

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

и добавил этот класс в div перед p-table тегом:

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

Это должно помочь.

UPDATE Проблема также может появиться из-за отсутствия шрифтов в IE11, который используется в компонентах PrimeNG. Это можно исправить, добавив шрифты в CSS:

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

Добавление этих шрифтов также может исправить некоторые другие проблемы стилей в IE11.