ui-grid row height using rowHeight: 'auto'

Question

Я получаю это странное поведение от ui-grid, которое, если я установил rowHeight в auto, каждая ячейка в одной строке будет иметь разную высоту. Одна из ячеек в каждой строке будет иметь многострочные данные, но, видимо, ui-grid захлебнется. (Я покрасил строку, чтобы вы могли видеть, что не так!) Любая идея, как это исправить? Я хочу получить одинаковую высоту для всех ячеек в каждой строке. Как вы обрабатываете разные высоты строк в одной сетке?

Answer 1

виртуализация в значительной степени невозможно без заранее определенных высоты строк. Вы найдете то же ограничение с любым инструментом виртуализованного списка. Например, проверьте Ionic's collection-repeat.

Проблема заключается в том, что UI-Grid отображает только подмножество всех строк в любой момент времени, но для того, чтобы это сделать появляется как все строки есть он должен создать пустое пространство вокруг тонированного строк. Если он не знает, насколько высок все строки, он не знает, сколько должно быть пустого пространства.

Если вам нужна автоматическая высота строки, она должна визуализировать каждую строку отдельно, измерять ее, а затем суммировать все высоты. Это полностью разрушит браузер.

Answer 2

Использование CSS

[ui-grid-row] { 
    display: table-row; 
} 

.ui-grid-row, .ui-grid-cell { 
    height: auto!important; 
} 

.ui-grid-cell { 
    float: none; 
    display: table-cell; 
} 

.ui-grid-header-cell, .ui-grid-cell-contents { 
    white-space: normal; 
    padding: 2px; 
    word-break: break-word; 
} 

Использование JavaScript

При использовании MultiSelect высоты колонны проверки не изменяются, так что вы можете установить enableRowHeaderSelection: false. Он будет скрывать этот столбец, но все же вы можете выбрать строки или если вы хотите, вы можете использовать эту функцию из @jibap для выравнивания контейнеров http://plnkr.co/edit/JwbEmPhJq2LInfUNncdi?p=preview