Максимальная высота NGX Datatable работает на начальном рендере, но ломается после фильтрации - PullRequest
0 голосов
/ 27 декабря 2018

У меня возникли проблемы с определением размера 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 максимальной высоты.

Кто-нибудь знает, что делать, чтобы это исправить?Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...