Decrease the vertical spacing on a Treeview

[Tonyz289]

I have Treeview (attached) and I want to decrease the vertical spacing.

Here is the CSS file.

.RadTreeView_tree_2,
.RadTreeView_tree_2 a.rtIn,
.RadTreeView_tree_2 .rtEdit .rtIn input
{
    color: #000000;
    font: 12px/18px "Segoe UI", Arial, sans-serif;
    /*line-height: inherit;*/
}

.RadTreeView_tree_2 .rtPlus,
.RadTreeView_tree_2 .rtMinus
{
    background-image: url('TreeView/PlusMinus.png');
}

.RadTreeView_tree_2 .rtChecked,
.RadTreeView_tree_2 .rtUnchecked,
.RadTreeView_tree_2 .rtIndeterminate
{
    background-image: url('TreeView/TriState.png');
}

.RadTreeView_tree_2 .rtHover .rtIn,
.RadTreeView_tree_2 .rtSelected .rtIn
{
    color: #363636;
    border: 1px solid #fcd132;
}

.RadTreeView_tree_2 .rtHover .rtIn
{
    background-color: #fcf9de;
    background-image: url('TreeView/ItemHoveredBg.png');
}

.RadTreeView_tree_2 .rtSelected .rtIn
{
    background-color: #fcecb1;
    background-image: url('TreeView/ItemSelectedBg.png');
}

.RadTreeView_tree_2 .rtSelected .rtLoadingBefore,
.RadTreeView_tree_2 .rtSelected .rtLoadingAfter,
.RadTreeView_tree_2 .rtSelected .rtLoadingBelow
{
    color: #333333;
}

.RadTreeView_tree_2 .rtLI .rtEdit .rtIn
{
    border-color: #fcd132;
    background: #ffffff;
}

.RadTreeView_tree_2_disabled .rtIn,
.RadTreeView_tree_2 .rtDisabled .rtIn
{
    color: #cccccc;
}

div.RadTreeView_tree_2 .rtIn
{
    /*font-size: 11px;
    line-height: normal;*/
    font-weight: normal;
}

div.RadTreeView_tree_2 .rtHover .rtIn
{
    line-height: normal;
    font-weight: bold;
}

div.RadTreeView_tree_2 .rtSelected .rtIn
{
    font-weight: bold;
}

div.RadTreeView_tree_2 .rtIn
{
    /*font-size: 10px;
    line-height: 12px;*/
}

div.RadTreeView_tree_2 .rtHover .rtIn
{
    border-right-color: rgb(252,209,50);
    /*line-height: 12px;
    font-size: 10px;*/
}

div.RadTreeView_tree_2 .rtSelected .rtIn
{
    /*font-size: 10px;*/
    font-weight: bold;
}

[Richard]

Tony:

Take a look at the How do I minimize the space between tree view nodes? forum thread. It appears that you can set the following CSS style to control the node separator:

.RadTreeView .rtSp {

  height: 16px !important;

}

Some additional adjustment may be required to compensate for specific browser versions.

Hope this helps!

[Tonyz289]

Great! That's just what I needed.

It does prompt a second question. Are the css classes for each telerik rad control documented anywhere? Such documentation would be very helpful.

[Richard]

Tony:

Yes, each control has documentation that details this information. For the RadTreeView, take a look in the "Appearance and Styling" folder of the documentation. You will find helpful documentation such as the Controlling Appearance and the CSS Skin File Selectors pages.

Cheers!