Trouble adjusting the vertical spacing between nodes in ASP.NET TreeView

I am using a TreeView control on my webpage and populating the nodes dynamically.  I want to decrease the vertical spacing between nodes but can't figure out the correct paramter to set.  Here is the code I have that doesn't seem to have an effect:

    <asp:TreeView ID="tvAlignment" runat="server" EnableClientScript="true"
        PopulateNodesFromClient="true" OnTreeNodePopulate="PopulateNode"
        ImageSet="Arrows" ExpandDepth="1">
        <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
            <asp:TreeNode PopulateOnDemand="True" SelectAction="Expand"
                Text="Alignment" Value="0">
        <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black"
            HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
        <ParentNodeStyle Font-Bold="False" VerticalPadding="0px" />
        <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"
            HorizontalPadding="0px" VerticalPadding="0px" />

I set the VerticalPadding to 0px in both the NodeStyle and ParentStyle tags.  Any help is greatly appreciated.
Who is Participating?
Bob LearnedConnect With a Mentor Commented:
You should be able to use an inspector, like Google Chrome, FireBug, or IE Developer Tools, to inspect the page, and determine what CSS styles are applied to each element in the DOM.
Jitendra PatilSr.Software EngineerCommented:
try with the below link
Redude the gap between Nodes in a ASP.NET TreeView

please scroll down for solution.

hope this helps.
dyaroshAuthor Commented:
I looked at the link and did the inspect and this is what I found:

The table has a class definition as follows: class="dynamiccontainer_onebox_onebox_tvAlignment_0 dynamiccontainter_onebox_onebox_tvAlignment_1"

While inspecting the element it looks like it is adding spacing or padding (not really sure) but I can't find the CSS file that contains the class.
dyaroshAuthor Commented:
Using Chrome I did an Inspect on the the treeview table that is rendered and discovered that a padding of 20px was being added to the top and bottom of each <td> tag.  Since applying a style sheet to the TreeView didn't solve the problem I added the following to my Style Sheet and wrapped my TreeView in a <Div> with the specified ID.

#treeView td
    padding: 2px 0px 1px 0px !important;

This gave me the spading I wanted.  The !important indicator is what allowed the style to be applied to all levels of the TreeView.

Thanks for your help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.