我的問題。我有一個 p-tree 組件，其中包含大量分層對象。當(dāng)我將它們展開到顯示垂直滾動條的位置時，一切都很好。但是，當(dāng)我展開更多節(jié)點以使溢出向右時，水平滾動條被隱藏。只有當(dāng)我一直向下滾動到樹的底部時，我才能看到水平滾動條。我已經(jīng)嘗試過各種 CSS mods 并通過檢查使用 ui-tree div，但我找不到任何似乎有效的東西。2 注意：將“溢出：自動”更改為“溢出：可見”只會完全消除垂直滾動條，并且內(nèi)容會消失在可見頁面之外。將溢出更改為滾動會創(chuàng)建一個水平滾動條，但它只是一個空欄，我需要向下滾動才能看到實際的滾動條。這是我的 ui-tree CSS：:host ::ng-deep .ui-tree {? border: 1px solid #adabab;? border-radius: 0px 5px 5px 0px;? background-color: rgba(0, 0, 0, 0.38);? color: #eaeaea;? padding-right: 5px;? width: 22em;? max-height: 75vh;? overflow: auto;? box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}自 4 月 1 日起，我正在使用最新的 PrimeNG 和 PrimeIcons 以及 Angular 9。不幸的是，由于專有問題，我無法發(fā)布我的代碼和/或 HTML，但如果沒有人有解決方案，我可以創(chuàng)建一個 fiddle/stackblitz/plunkr ，但這需要一些時間，但如果有必要的話我會這樣做。簡而言之，水平滾動條是隱藏的，直到我一直向下滾動，并且無論垂直滾動條的位置如何，我都需要它可見并正常工作。非常感謝任何幫助或建議！
1 回答
慕尼黑8549860
TA貢獻(xiàn)1818條經(jīng)驗 獲得超11個贊
解決了我自己的問題，盡管感覺有點混亂。將其留在這里，以防其他人遇到此問題或有更優(yōu)雅的方法來解決它，而無需一堆 :host 和 ::ng-deep 因為它們在將來的某個時候會消失。
我最終不得不為以下內(nèi)容創(chuàng)建額外的 CSS 規(guī)則：
:host ::ng-deep .ui-tree {
? border: 1px solid #adabab;
? border-radius: 0px 5px 5px 0px;
? background-color: rgba(0, 0, 0, 0.38);
? color: #eaeaea;
? padding: 0em 0em;
? padding-right: 5px;
? width: 22em; /* This constrains the width and creates the horizontal scrollbar when a p-tree node is expanded past this width. */
? line-height: 15px !important;
? max-height: 75vh;
? overflow: overlay; /* Changed from auto to overlay */
? box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* This creates the horizontal scrollbar visible on top of the inner divs */
:host ::ng-deep .ui-tree .ui-tree-container {
? overflow: initial;
}
/* This keeps a margin between horizontal overflow and the vertical scrollbar. Without it content would be hidden behind the scrollbar */
:host ::ng-deep .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {
? margin-right: 10px;
}
- 1 回答
- 0 關(guān)注
- 221 瀏覽
添加回答
舉報
0/150
提交
取消