Отсутствующие данные дерева с виртуальной прокруткой с высотой изгиба для компонента angular-tree - PullRequest
Новая
       38

Отсутствующие данные дерева с виртуальной прокруткой с высотой изгиба для компонента angular-tree

3 голосов
/ 23 сентября 2019

Я пытаюсь использовать гибкую высоту для дерева с виртуальной прокруткой.Однако, когда я установил контейнер дерева на 100% и установил высоту гибкого элемента, фрагмент данных отсутствует на экране во время прокрутки.

Я добавил рабочий пример здесь https://stackblitz.com/edit/angular-d2mavw

Если я открою последний узел rootDynamic49, будут видны только 20 дочерних элементов.Однако у него 50 детей.С другой стороны, когда я устанавливаю высоту 100px, все дочерние элементы видны.

Есть ли способ, которым я могу сохранить первый div в верхней позиции и добавить прокрутку только для деревас гибкой высотой?

1 Ответ

1 голос
/ 27 сентября 2019

Когда вы используете height: 100%; и расширяете дерево, высота области просмотра виртуальной прокрутки не обновляется до новой высоты дерева.Это остается на его px значении.Мы можем вообще опустить этот CSS и установить height в container вместо этого, используя display: grid;

app.component.css 

.container {
    border: 1px solid black;
    display: grid;
    grid-template-rows: auto calc(100vh - 38.4px); // StackBlitz adds 8px padding to body and 'First div' has a height of 22.4px (8 + 8 + 22.4 = 38.4px).
}

calc(100vh - 38.4px) необходимо заменить на желаемую высоту.Использование значений % здесь кажется противоречащим тому, что вы упомянули в OP о том, что 'First div' фиксируется в верхней позиции, потому что, если div задано 100%, оно будет растягиваться по своему содержанию и в целом divбудет прокручиваться вне поля зрения.

Тогда все, что вам нужно, это использовать display: inline; на tree-container, чтобы он вписывался в основное div.

angular-tree.component.css 

.tree-container {
    display: inline;
}

Примечание : я использовал 22.4 для nodeHeight, так как при проверке узлов высота в точности равна 22.4px.

Вот рабочий пример для StackBlitz .Вот превью того же.

...