У меня возникли проблемы с определением размера div с данными NGX.
Я бы хотел, чтобы максимальная высота стола составляла 250 пикселей.(В идеале я бы хотел просто ограничить максимальную высоту до 5 строк).Моя текущая реализация:
<div>
<input type="text" (keyup)='filterDatatable($event)'> .
<ngx-datatable
class='bootstrap'
[rows]='data'
[columnMode]="'force'"
[headerHeight]="100"
[footerHeight]="0"
[rowHeight]="38"
[selected]="selected"
[selectionType]="'checkbox'"
[columns]="columnConfiguration"
[scrollbarV]="true"
[sorts]="[{ prop: 'sizeCode', dir: 'asc' }]"
(select)='onSelect($event)'>
</ngx-datatable>
</div>
Когда я фильтрую, массив данных корректируется соответственно.Я следовал за этим в качестве руководства по фильтрации ( Реализация фильтрации данных NGX по всем столбцам )
В таком виде, каждая строка просто отображает, как и ожидалось.Теперь мне нужно установить максимальную высоту.Вот что я попробовал до сих пор:
Самое близкое, что я могу получить, это убрав аргумент scrollbarY и добавив в виртуализацию:
<div>
<input type="text" (keyup)='filterDatatable($event)'> .
<ngx-datatable
class='bootstrap'
[rows]='data'
[columnMode]="'force'"
[headerHeight]="100"
[footerHeight]="0"
[rowHeight]="38"
[selected]="selected"
[selectionType]="'checkbox'"
[columns]="columnConfiguration"
[limit]="5"
[sorts]="[{ prop: 'sizeCode', dir: 'asc' }]"
(select)='onSelect($event)'>
</ngx-datatable>
</div>
На самом деле это именно тот результат, который мне нужен, кроме(очевидно) отсутствует полоса прокрутки, что означает, что я вижу только первые 5 строк.При этом после создания фильтра он уменьшается и увеличивается, как и ожидалось.
Затем я попытался справиться с этим с помощью CSS, добавив полосу прокрутки назад и добавив в CSS максимальную высоту:
<div>
<input type="text" (keyup)='filterDatatable($event)'> .
<ngx-datatable
class='bootstrap'
[rows]='data'
[columnMode]="'force'"
[headerHeight]="100"
[footerHeight]="0"
[rowHeight]="38"
[selected]="selected"
[selectionType]="'checkbox'"
[columns]="columnConfiguration"
[scrollbarV]="true"
[sorts]="[{ prop: 'sizeCode', dir: 'asc' }]"
(select)='onSelect($event)'>
</ngx-datatable>
</div>
.ngx-datatable.scroll-vertical {
max-height: 250px;
}
Итак, при первоначальном рендеринге все идеально.Datatable NGX составляет 250 пикселей.После применения фильтра таблица данных NGX уменьшается до соответствующего размера в соответствии с применяемыми фильтрами.Проблема в том, что когда я очищаю фильтры, это выглядит так:
https://imgur.com/7JuPkma
На этой картинке довольно трудно увидеть, но таблица теперь имеет размер около 10 пикселей.high и содержит все данные (около 500 строк), но по какой-то причине свалился сам по себе и не будет подчиняться CSS максимальной высоты.
Кто-нибудь знает, что делать, чтобы это исправить?Заранее спасибо!