Broken line in ASP.NET 2.0 TreeView in IE 7

Rate This

Carlo Cardella

22 May 2007 11:48 PM

Comments 53

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

ASP.NET, Internet Explorer