Handsontable неправильный размер высоты колонки - PullRequest
Новая
       11

Handsontable неправильный размер высоты колонки

0 голосов
/ 13 июня 2018

В html-файл загружен следующий handsontable.

HTML 

<div id="example1"></div>

CSS 

<style>
.handsontable .colHeader {
   overflow: hidden;
   /* Expands or shrinks column names as required to fill the available free
   space. Stops column headers overflowing onto filters. Causings Col Header row 
   sizing issues on IE and Edge when enabled. */
   display: flex;
   height: 20px;
}
</style>

JS 

document.addEventListener("DOMContentLoaded", function() {

var container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(10, 200)
    , rowHeaders: true
    , rowHeaderWidth: 25
    , rowHeights: 25
    , colHeaders: true
    , colWidths: 40
    , columnSorting: true
    , filters: true
    , dropdownMenu: true
  });  

});

Вы можете просмотреть его в действии по следующей ссылке.

https://jsfiddle.net/JoshAdams/nbLy6j04/

Я хочу, чтобы имена заголовков моих столбцов были скрыты за символом фильтра столбцов.Поэтому я изменил свойство отображения ColHeaders на flex.Это прекрасно работает во всех браузерах.

Однако изменение этого значения дисплея вызывает странное поведение в MS Edge и IE.В частности, это приводит к неправильному изменению размеров столбцов при прокрутке таблицы.См. Изображение ниже.

col-heights-bug

Это объясняется тем, что IE и Edge должным образом не поддерживают отображение: flex.

Так что мойвопрос есть.Могу ли я внести какие-либо изменения в свой код для достижения желаемой функциональности.Т.е. если текст заголовка столбца переполняет столбец (и кнопку фильтра), скрыть переполненный раздел текста?

...