添加jstree節點文本和滾動條之間的縫隙

我有一個容器，它比樹小的簡單jstree：添加jstree節點文本和滾動條之間的縫隙

<div style="width:250px;height:150px; border:solid; overflow: auto;"> 
    <div id="jstree" style="padding:20px"></div> 
</div>

在plunkr

看到演示，我試圖添加的視覺空間（即5px）在節點文本的可見部分和滾動條之間。所以在切割線的末端和垂直滾動條之間存在間隙，並且切碎的線最終具有「..」，並且樹的底部與水平滾動條之間存在間隙。

我已經看過很多帖子，並嘗試過填充，邊距，包裝divs等的各種組合，但沒有成功。

我正在尋找解決的辦法是：

理想CSS只
增加了節點的文字和可見部分水平和垂直滾動條
增加省略號截斷之間的間隙節點的文本
作品與jquery.scrollbar

THX！

來源

2016-05-11 kofifus

plunkr演示看起來很好... – RRR

推倒了... ...加上'.jstree錨{ 保證金右：5px的; }'到css文件 – RRR

因爲差距是5px，你不會注意到差異變化5px到50px – RRR

我明白，你想加省略號前的文本通過DIV被溢出。根據滾動條的移動，文本將顯示出來。

基本上，我在插件觸發ready.jstree事件後添加一個計算。

$('#jstree').on('ready.jstree', function() { 
    resizeWrap(); 
});

請查看我的完整的解決方案： https://jsfiddle.net/alexndreazevedo/qozdy7m8/

來源

2016-05-17 15:39:55 alexndreazevedo

你的解決方案看起來不錯，但我認爲@koffius正在尋找不同的前景。當我們打開和關閉樹的每個節點時，您的css會使區域更改大小。這反過來意味着具有取決於滾動條的隱藏結果的效果永遠不會被允許發生，因此消除了具有填充效果的每個機會。 –

我最喜歡這個解決方案，並會給它賞金。通過在div上設置一個固定的高度，可以很容易地解決高度問題。我仍然沒有在滾動條之前留下空隙，但至少我得到了很好的elipsis。 alexndreazevedo，如果你修復了高度和缺口問題，我會將其標記爲答案，thx！ – kofifus

@ kofifus，我改變了功能。如果您的內容比固定大小的包裝要大，它會計算一個較小的寬度以顯示內容，從而模擬填充。請看，鏈接，並檢查我的答案:) https://jsfiddle.net/alexndreazevedo/qozdy7m8/ – alexndreazevedo

嗨，這裏是解決這個問題的方法...請檢查https://jsfiddle.net/RRR0308/jfu845zr/ ...我已經在主div中插入了一個絕對定位的div，並設置了高度和寬度，以便它可以產生10px的邊距效果。

HTML

<div style="width:250px;height:150px; border:solid; overflow: auto;"> 
     <div id="jstree" style="padding:20px"></div> 
     <div class="xyz"></div> 
</div>

CSS

.xyz{ 
    position:absolute; 
    height:133px; 
    width:10px; 
    background:#F3F5F6; 
    z-index:999; 
    top:11px; 
    left:235px; 

}

更新演示：https://jsfiddle.net/RRR0308/jfu845zr/3

來源

2016-05-11 12:13:05 RRR

請檢查https://jsfiddle.net/RRR0308/jfu845zr/1/ ...我改變高度並動態使用jQuery – RRR

更新：https：// jsfiddle。淨/ RRR0308/jfu845zr/2 /我也有固定的頂級問題太...現在xyz div將永遠在主分區 – RRR

更新：https：//jsfiddle.net/RRR0308/jfu845zr/3/這將設置頂部並在主div中留下'xyz' div的位置，即使窗口被調整大小或div浮動 – RRR

這增加了節點的文字和可見部分水平和垂直滾動條（5px加）之間的差距。

它還爲截斷節點的文本添加省略號。

.jstree-anchor { 
    width: 150px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin-right: 5px; 
}

來源

2016-05-18 15:10:34 sarath

似乎沒有工作，樣本？ – kofifus

https://plnkr.co/edit/VIFRq9kSShPtHU2tKfF1?p=preview 在css部分添加上面的css。 – sarath

？我沒有看到任何差距或elipsis – kofifus

添加jstree節點文本和滾動條之間的縫隙

回答

相關問題