Broken line in ASP.NET 2.0 TreeView in IE 7


Create a very simple page in ASP.NET 2.0, add a TreeView control and set ShowLines=true; now browse the page with Internet Explorer 7: you'll very likely see something like this:

treeview broken lines

 

In IE 6 this looks good... smile_thinking

The point is that Internet Explorer 7 changes the boxing model: now a box that's too small to accomodate ita content won't stretch like it does on all other browsers including IE6, it will try to stay as small as possible. The problem in this case is that the DIV tags generated by the control are just 1 pixel height, which was working fine until now. Here is how the "View source" for the page above looks:

   1: [...]
   2: <table cellpadding="0" cellspacing="0" style="border-width:0;">
   3:     <tr>
   4:         <td>
   5:             <div style="width:20px;height:1px">
   6:                 <img src="/TreeViewSample/WebResource.axd?d=vGK_uMmdWLf5UZMMUhv9tSAl-YQg-jrsZ90xzYAI6TE1&amp;t=632985107273882115" alt="" />
   7:             </div>
   8:         </td>
   9:         <td>
  10:             <a id="TreeView1n1" href="javascript:TreeView_ToggleNode(TreeView1_Data,1,TreeView1n1,'l',TreeView1n1Nodes)">
  11:                 <img src="/TreeViewSample/WebResource.axd?d=vGK_uMmdWLf5UZMMUhv9tfjlKbdZ_ojL4O8CY0ydKO_HFK9lO1t2cZ2AjaDIqJy_0&amp;t=632985107273882115" 
  12:                 alt="Collapse New Node" style="border-width:0;" />
  13:             </a>
  14:         </td>
  15:         <td style="white-space:nowrap;">
  16:             <a class="TreeView1_0" href="javascript:__doPostBack('TreeView1','sNew Node\\New Node')" 
  17:                 onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1');" id="TreeView1t1">New Node</a>
  18:         </td>
  19:     </tr>
  20: [...]

As you can see, the first DIV tag contains a style definition with "height:1px"; that's the problem.

And now, here is how we can sort this out:

  • Create a new style definition in your page (or create an external .css file and link it in your pages, pedending on your needs)
  • Add the following class definition: ".tree td div {height: 20px !important}" (of course without quotation marks)
  • In your TreeView component add a referende to CssClass="tree"

Note that normally the style defined in the DIV takes precedence over the style defined at page level (or external .css file), but since in this case we need to override that setting, we can use the !important CSS directive; here is how the modified source looks like:

   1: [...]
   2: <html xmlns="http://www.w3.org/1999/xhtml">
   3: <head runat="server">
   4:     <title>Untitled Page</title>
   5:     <style>
   6:         .tree td div {
   7:             height: 20px !important
   8:         }
   9:     </style>
  10: </head>
  11: <body>
  12:     <form id="form1" runat="server">
  13:         <div>
  14:             <asp:TreeView ID="TreeView1" runat="server" ShowLines="True" CssClass="tree">
  15:                 <Nodes>
  16:                     <asp:TreeNode Text="New Node" Value="New Node">
  17:                         <asp:TreeNode Text="New Node" Value="New Node">
  18:                             <asp:TreeNode Text="New Node" Value="New Node">
  19: [...]

And the resulting page:

treeview fixed page

 

P.s.: thanks to my colleague Markus Rheker for this one! smile_regular

 

Carlo

Comments (54)

  1. anothr user says:

    One new subscriber from Anothr Alerts

  2. Para poder ver las líneas que unen los nodos en un TreeView, hice uso de las siguientes propiedades LineImagesFolder

  3. The listed changes had no affect.  I still get broken vertical lines with IE7 and FF.

  4. Uhm… weird, I tested them before posting… Matthew, are you sure you are using the right values? If you copy the code above and test in a sample page, what do you get?

  5. Robotacon says:

    Matthew Weaver prolly forgot this step:

    In your TreeView component add a referende to CssClass="tree"

  6. Boogie says:

    Excellent info 2nd link on goog

    Thanks!!!

  7. Karl says:

    Awesome. Worked like a charm. I was getting sick of looking at those broken lines 🙂

  8. Asu says:

    Excellent job 🙂 the only reason i wasn’t using the css adapted treeview was for the lines.

  9. david smith says:

    Superb!  I’ve been trying to sort out these gaps for months…  

  10. xh says:

    thanks for the tip!

  11. Jaacob says:

    thanks a lot! I wouldn’t find out..

  12. Pavel says:

    Greate respect for solve this

  13. Great post, I have been looking into this myself and also figured out the 1px height problem but couldn’t solve it.

    Thx for your post!

  14. Eddy says:

    The solution works great.

    Unfortunately, lines break again when you set treeview’s NodeWrap property to true, and a treeview item spans across multiple lines.

  15. True… I guess that’s because those dotted lines are actually images (if you use IE developer toolbar you can quickly highlight them all) and are not easilly customizable, unless maybe you use your own set of images for the control. I tried to tweak it with some stylesheet properties but with no luck so far… 🙁

    Let’s see if I can come up with something useful

  16. kspriggs says:

    Solution is a big help…but..seems to have further problems if the treeview display properties are altered.  For example if the Vertical NodeSpacing or BoderStyle Setting are changed from default the problem continues.  I have tried to compensate the height number with border width changes, but no success.  Does anyone have a solution for thios please?

  17. danteman says:

    Also having same problem as Matthew Weaver. I still get broken lines. I have set the CssStyle on the TreeView component. I have also removed all other of the other TreeView display properties.

    Does anyone have a solution?

  18. ken@spriggs.com.au says:

    I have just loaded the new IE8.  Unfortunately, it seem to have the same problem as described above.   Does anyone have a work-around or a treeview which works??

  19. Vinod Nair says:

    Awesome!!! it works great surprisingly 🙂

  20. eXiaMike says:

    Yes good job !

    But unfortunately if you enable Checkboxes, the problem is still here.

    then you need to remove padding for the div container of the checkbox. For example with a NodeStyle-CssClass="TreeNode"

    you should try this : .TreeNode { padding-top:0px !important;padding-bottom:0px !important; }

    😉

  21. David H says:

    Cheers for the good tip.  Worked perfect.

  22. vinod j nair says:

    thanks for your solution. It worked fine surprisingly. I am facing another issue by having checkboxes enabled in my treeview. When i try to expand a subnode having checkbox already enabled and having child nodes, it renders incorrectly on postback and displays in the root node level. Please reply soon with your inputs.

  23. Hi Vinod,  eXiaMike here above already added the solution… 🙂

    […]

    you need to remove padding for the div container of the checkbox. For example with a NodeStyle-CssClass="TreeNode"

    you should try this : .TreeNode { padding-top:0px !important;padding-bottom:0px !important; }

    […]

  24. vinod j nair says:

    Unfortunately, this didn’t work for me :-(. I will try to explain my scenario with a small example. Lets say i have a tree like a<-b<-c (a is parent to b & b is parent to c). When i check the checkbox for node ‘a’ and then click + sign to expand, the node ‘b’ is displayed and added NOT as a child to node ‘a’ but in the same root level as node ‘a’ exists. Same is the case when node ‘b’ is checked and expanded to get node ‘c’.

    When i click on the node ‘b’ it refreshes the grid and the tree is formed correctly i.e. node ‘b’ child node of ‘a’.

    Please let me know what can be done to fix this.

  25. Vinod, this is a completely different problem, not really what’s described in the post (I guess that’s why the solution does not work for you)… the indentation level has nothing to do with the "dotted" line which is just a "cosmetic" thing.

    What you describe sounds like either a coding issue (or maybe a bug in the control, it cannot be excluded at the moment) so I think you should really consider opening a call with CSS (http://support.microsoft.com) and someone from my team (maybe me, if you’re based in EMEA) will have a look, best working on a sample to repro the problem.

    HTH

  26. MrShovel says:

    This fix didn’t want to work for me…

    I tracked it down to may master page’s style sheet setting a vertical-align: top; to the region containing the treeview. This still left gaps in the lines… to fix this I just added vertical-align: baseline; to the treeviews style & that fixed it…

    This took me hours to find… hope it helps someone else.

  27. Scott Johnson says:

    The fix above sorted out my page in IE but not FF. After a bit of playing about I managed to sort it by adding the following:

    .tree td img { vertical-align: bottom; }

    SJ

  28. M.E.S.H says:

    Worked fine in IE7, FF 2 and Opera 9.25.

    Many thx to you and Markus Rheker !

    /M.E.S.H

  29. Jesse Myer says:

    Awesome solution to a common ASP problem!

  30. Steve says:

    Thank you SOOOOOO much.  Worked perfectly!

  31. Andrey says:

    Thank you very much for this handy research

  32. John says:

    Why hardcode 20px for the height.  Wouldn’t 100% work better?

  33. Well, for this scenario with the TreeView 100% is equivalent to 20 pixels… anyway yes, you could just set

    &lt;style&gt;
    
        .tree td div
    
        {
    
            height: 100% !important;
    
        }
    
    &lt;/style&gt;
    
  34. Jason Cabot says:

    Awesome, thanks! easily solved the problem with such a simple, un-hacky solution

  35. Shailesh Bakadia says:

    wow its really gr8. i did it thanks for your research and  suggestion. i tested now it on all browser and is functional

    thanks a lot 🙂

  36. allenhuang007@tom.com says:

    i still have this problem.Any other solutions?

  37. A says:

    mee too

    i still have the problem !

    please help me..

  38. Note that it you have treeview’s NodeWrap property to true and a treeview item spans across multiple lines (I mean text lines) the problem remains; this is because the image used to represent the conjunction line between nodes has a fixed size and does not "expand" to fill the increased height of its html cell

  39. Scott says:

    Awesome fix!  Thanks for your time.

  40. Valamas says:

    You rock!

    Thanks and happy new year,

  41. Me says:

    Thanks!  This has been bugging me for a long time…

  42. Gil.Y says:

    Silly!!!! We all been so silly till now 🙂

  43. Viji says:

    Thanks for your solution. If you set NodeSpacing with some values, I can see broken lines in the browser. Do you have solution for the same?

  44. Coder says:

    Excellent. Helpded a lot!..Keep posting.!

  45. Scott Lyons says:

    Excellent! This saved me much time. Many thanks!

  46. Guillermo says:

    You save me. My heroe!!!

    It’s Ok in Firefox 3.5.8 and IE 8.0

    Great!!!!!! Thanks from Spain.

  47. Nilesh Hirapra says:

    Thanks for this post. It help me also to resolve broken line issues.

  48. Nripin Babu says:

    Great Tip mate !!

    Keep up the good work !!

  49. moayad says:

    still broken

    r u sure?

  50. sami says:

    thanks

  51. Dave says:

    As Viji said in Dec 09, if you set padding (either by NodeStyle VerticalPadding property or through CSS) there are still broken lines. The div height fix did help a bit, but they are still broken. I changed the top and bottom padding to 1px so the broken part is minimal, but I would like to know if anyone managed to figure out a fix to this scenario. I also tried changing the div height to 21 or 22px and also 100%, but it made no difference. Thanks

  52. Marlon says:

    Awesome, Easy, and PERFECT fix ! Thanks!

    /Marlon

  53. Gatim says:

    I am trying to get the tree view node object based upon its INDEX value, however I am not able to find a way to do it on client side JS

Skip to main content