Это простой Semantic UI и очень легкий CSS.
Я пытаюсь поместить список, который работает как древовидное представление, в столбец и сделать так, чтобы список стал прокручиваемым, если высота, если его содержимое превышает высоту родительского столбца. Я ожидаю, что это будет сделано с помощью чистого CSS. Тем не менее, я не могу заставить его работать. Что я делаю не так.
Вот урезанная версия - извините за миллиарды делений, но именно так работает список семантического интерфейса пользователя, и мне нужно было достаточно, чтобы сделать приличную высоту в элементе списка.
Запустите фрагмент в новое окно, а затем измените его размер, перетащив нижний край вверх. Вы увидите, как нижняя линия сетки перемещается, чтобы переобучить ее поля, а голубая / голубая граница также перемещается вверх, потому что ее высота = 100% от родительской, а родительская высота уменьшается. Когда голубая / голубая граница соответствует элементу пурпурного списка, мы должны получить вертикальную полосу прокрутки.
РЕДАКТИРОВАТЬ: Кажется, что проблема связана с
<div class="ui grid celled padded">
в сочетании с
<div class="row">
После повторного подтверждения я не схожу с ума, и все, что нужно сделатьустановлен style @ overflow-y: scroll @ на простом примере div, затем возвращаясь к демонстрации ниже в автономном режиме и вырубая все биты SUI, а затем снова представляя, я пришел к такому выводу.
Итак, перекодированиеэто с простым
<div class="ui grid" style="height: 90%;">
и удалением строки div, кажется, путь вперед. В моем случае использования мне не нужны параметры grid @celled padded @, так что никакого вреда не будет.
Однако в других случаях я бы не хотел иметь возможность прокручивать слишком длинный контент в фиксированном виде. высота строки? Или я обдумываю это. Время для кофе.
Ниже следует оригинальная демоверсия номера:
<html>
<head>
<title>Treeview scaffolding</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="icon" href="data:;base64,iVBORwOKGO=" />
<style type='text/css'>
.contentwrapper {
height: 100vh;
}
p {
margin: 1em 0em;
}
</style>
</head>
<body class='body'>
<div class="contentwrapper">
<div class="ui grid celled padded" style="height: 100vh;">
<div class="row" style="height: 10%;">
<div id="info" class="sixteen wide column">
<p>Info</p>
</div>
</div>
<div class="stretched row" style="height: 90%">
<!-- treeview, editor and props row -->
<div id="nodes" class="four wide column">
<div class="ui top attached large label" >Treeview</div>
<div id="nodeListWrapper" class="" style="border: 1px solid cyan;">
<div id="nodeList" class="" style="background-color: magenta; overflow-Y: auto;">
<div class="ui list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Items 1 - 1 </div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 2 - 1</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 3 - 1</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 4 - 1</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 4 - 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 2 - 2</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc </div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui list" style='display: none;'>
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="display" class="ten wide column">
<div class="ui top attached large label">Selected Info</div>
</div>
<div class="two wide column">
<div class="ui top attached large label">Another column</div>
</div>
</div>
</div>
</div>
</body>
<script src="../scripts/live.js"></script>
</html>