Skip to content

Commit 97b9d6c

Browse files
committed
fix: tree scroll
1 parent 8820b6e commit 97b9d6c

2 files changed

Lines changed: 56 additions & 10 deletions

File tree

src/app/elements/asset-tree/asset-tree.component.scss

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,25 @@
1111
@content;
1212
}
1313

14+
:host {
15+
display: block;
16+
height: 100%;
17+
min-height: 0;
18+
overflow: hidden;
19+
}
20+
1421
.tree-container {
1522
display: flex;
1623
flex-direction: column;
1724
height: 100%;
25+
min-height: 0;
26+
overflow: hidden;
1827
background-color: var(--el-asset-tree-bg-color);
1928

2029
.tree-type {
30+
flex: 0 0 30px;
31+
min-height: 30px;
32+
overflow: hidden;
2133
transition: all 0.3s;
2234

2335
.tree-type-banner {
@@ -141,9 +153,10 @@
141153

142154
.tree-type-content {
143155
position: relative;
156+
flex: 1 1 auto;
144157
padding: 1px;
145-
min-height: 40px;
146-
height: calc(100% - 31px);
158+
min-height: 0;
159+
height: auto;
147160
background-color: var(--el-asset-tree-bg-color);
148161
overflow: hidden;
149162
scrollbar-gutter: stable both-edges;
@@ -170,7 +183,11 @@
170183
}
171184

172185
&.expand-tree {
173-
height: calc(100% - 31px);
186+
display: flex;
187+
flex: 1 1 0;
188+
flex-direction: column;
189+
min-height: 0;
190+
height: auto;
174191
}
175192
}
176193
}

src/app/elements/left-bar/left-bar.component.scss

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
1+
:host {
2+
display: block;
3+
height: 100%;
4+
min-height: 0;
5+
}
6+
17
.sidebar {
8+
display: flex;
9+
flex-direction: column;
210
height: 100%;
11+
min-height: 0;
312
width: 100%;
413
overflow: hidden;
514

615
.tree {
7-
display: block;
16+
display: flex;
17+
flex: 1 1 auto;
18+
flex-direction: column;
19+
min-height: 0;
20+
overflow: hidden;
821
}
922

1023
.menu-icon {
@@ -22,11 +35,16 @@
2235

2336
.menu-icon {
2437
display: block;
38+
flex: 1 1 auto;
39+
min-height: 0;
40+
height: auto;
41+
overflow-y: auto;
2542
}
2643
}
2744

2845
.organization {
2946
display: flex;
47+
flex: 0 0 30px;
3048
flex-direction: column;
3149
justify-content: center;
3250
height: 30px;
@@ -42,26 +60,37 @@
4260
}
4361

4462
.my-assets {
45-
height: calc(100vh - 61px);
63+
flex: 1 1 auto;
64+
min-height: 0;
65+
height: auto;
66+
overflow: hidden;
4667
color: var(--el-text-color-light);
4768

48-
&.has-org {
49-
height: calc(100vh - 91px);
50-
}
51-
5269
.overflow {
5370
display: flex;
5471
width: 100%;
5572
height: 100%;
73+
min-height: 0;
5674
}
5775

5876
.ngx-scroll-overlay {
59-
overflow: auto; // for FF
77+
// The tree content owns vertical scrolling. A scrollable wrapper here
78+
// creates a second scrollbar when more tree sections are added.
79+
overflow: hidden;
80+
}
81+
82+
elements-asset-tree {
83+
display: block;
84+
flex: 1 1 auto;
85+
min-height: 0;
86+
height: 100%;
87+
overflow: hidden;
6088
}
6189
}
6290

6391
.footer-version {
6492
display: flex;
93+
flex: 0 0 30px;
6594
align-items: center;
6695
line-height: 30px;
6796
font-size: 9pt;

0 commit comments

Comments
 (0)