I’ve been writing a subclass of the MS Webcontrol.TreeView control for one of our Web Applications at work. I figured this would be a fairly easy task, since I only needed to extended it with a few properties. It turns out that I was caught on a nit-picky annoyance in the TreeView control itself.
The TreeView control renders verticals lines with gaps.
Here’s a screen cap of the problem.

As you can see, the TreeView control renders the vertical line with a gap, or break (looks like a dashed line!). It didn’t matter how I loaded the data - dynamic/runtime/design time - I get the same gap no matter what!
I was able to see that it was not a problem in IE 6 or less, but what good is that? Well, it turns out that it was a bit of a clue because starting with version 5, IE didn’t render things correctly per the CSS boxing specification. This was fixed in IE 7, but to provide backwards compatibility, Microsoft carried this busted form of rendering forward in IE 6 as QuirksMode. The line gap problem only occurs in strict mode (default for IE 7 and 8, as well as firefox). I could make the line gap go away by forcing the browser into QuirksMode (by adding a comment, ex:
< ! - - QUIRK! - - >
to the very top of the HTML file), but I was writing a web control and would not always have the luxury of controlling my container.
I needed to find a long term solution to this problem.
Next, I looked at the HTML source of the rendered page, and saw this:
[html]
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td>
<div style="width:20px;height:1px">
<img src="/TreeviewControlTest/WebResource.axd?d=OYmDnVppVECKIpxOWC8o8Y7DO6QwB2J3EY4s4RR8zAU1&t=633765128008804061" alt="">
</div>
</td>
<td>
<img src="/TreeviewControlTest/WebResource.axd?d=OYmDnVppVECKIpxOWC8o8UGy0bLoCc8gOB1oQm6Pzj81&t=633765128008804061" alt="">
</td>
<td class="TreeView1_WebTree_1" style="white-space:nowrap;">
<a class="TreeView1_WebTree_0" href="javascript:__doPostBack(’TreeView1$WebTree’,'Root//Tree’)" onclick="TreeView_SelectNode(TreeView1_WebTree_Data, this,’TreeView1_WebTreet6′);" id="TreeView1_WebTreet6" name="TreeView1_WebTreet6">Tree</a>
</td>
</tr>
</table>
[/html]
Each node is rendered as a table, with the vertical line and expand/collapse icons being in their own table cell and wrapped in a div. The problem was the style applied to the outer div - style=”width:20px;height:1px“.
That 1px height was causing the vertical line image to be compressed, but where did it come from?
Reflecting on System.Web.UI.WebControls.TreeNode
I spent almost an hour delving into the various (and copious!) style properties for the tree and its nodes, looking for where this height setting was generating from. I couldn’t find it! I eventually opened the System.Web.UI.WebControls.dll in Reflector to see what the render code for the node was doing:

Well, once I saw that the code was hard-wired to render this CSS style, I was done. Or was I?
!important
Well, it wasn’t going to be as easy as setting the style in the code behind, but I could override the style in my own class.
The trick is to define, and apply the following CSS class:
[css]
<style type="text/css">
.MyTreeView TD Div
{
height: 20px!important;
}
</style>
[/css]
The !important CSS directive overrides the style applied in the System.Web.UI.WebControls.TreeNode render method.

Again, just as with the QuirksMode comment above, I was able to add the CSS style to the page and voila - problem solved. But this still wasn’t good enough. I needed this to work out of the box for any consumers of my control.
The ultimate answer was to override the RenderBeginTag of the TreeView control, and render this style before the control itself:
[vb language=".net"]
Public Overrides Sub RenderBeginTag(ByVal writer As System.Web.UI.HtmlTextWriter)
‘/////////////////////////////////////////////////////////////////////////////////////////
‘/// This is a total hack to get around some Microsoft BS which hardwires
‘/// a style attribute on the node div to set the height = 1px!
‘///
‘/// This renders a css override to force the div to the proper height
‘/////////
Me.CssClass = String.Concat(Me.CssClass, " MyTreeView")
writer.WriteBeginTag(HtmlTextWriterTag.Style.ToString)
writer.WriteAttribute(HtmlTextWriterAttribute.Type.ToString, "text/css")
writer.WriteLine(HtmlTextWriter.TagRightChar)
writer.Write(".MyTreeView TD Div ")
writer.WriteLine("{ height: 20px!important; }")
writer.WriteEndTag(HtmlTextWriterTag.Style.ToString)
writer.WriteLine()
‘//////////////////////////////////////////////////
‘/// Render the Standard Begin Tag
MyBase.RenderBeginTag(writer)
End Sub
[/vb]
Related Posts - How to Delete Empty Folders - FREE! While performing a disk cleanup recently, I had cause to locate and delete any empty folders under a root folder. I knew there had to be a batch file command...
- 10 Useful, Often Overlooked HTML Tags. Pop quiz: When would you use the <wbr> tag, and what does it do? Yeah, I had no idea either. In fact, I had never even seen this tag before,...
- Dude, Where's my Folder treeview?! After a wee bit O' overzealous registry cleaning last week, I had a minor panic. Well, a picture being worth a 1000 words, here's what I saw when I opened...
- How to fake a TreeNodeCollection subclass in .NET If you've ever had reason to try to extend the standard Microsoft web TreeView control, you will have no doubt noticed that MS was quite unkind to you and sealed...
- Free Firewall Recommendations (Protect Yourself Online With These Free Firewalls) If your home computer is connected to the internet, or to other computers that are connected to the internet - you need a firewall. It's as simple as that. Hackers...
Related Websites - Getting Started Writing Articles The job of article writing requires considerable skill and expertise in order to carry out with ease and perfection. Yes, this job is not as easy as many would think. An article is written in order to provide some information and it is very important that the article writer......
- Search Engine Optimization Seo Search Engine Optimization (SEO) in Dubai Like other business homes Dubai conjointly have internet solutions firms that provide complete range solutions of internet development are operating on new trends and selling ways for on-line businesses. Dubai is the business hub for the globe trade. It’s the time of on-line businesses.......
- Fallene Cotz SPF 58 Water Resistant UVB/UVA Sunscreen for Sensitive Skin, 2.5-Ounce Tube User Reviews Send this to a friend Fallene Cotz SPF 58 Water Resistant UVB/UVA Sunscreen for Sensitive Skin, 2.5-Ounce Tube Manufacturer: Fallene Customer Rating: List Price: $26.00 Sale Price: $16.50 Availibility: Usually ships in 24 hours Free Shipping Available Buy Now Product Description Fallene Cotz SPF 58 is a......
- Hybrid Diesel Auto Insurance This post is a guest blog written by Travis Overby. In recent years, the popularity of âgreenâ cars has been steadily increasing across the country. When people think of fuel efficient cars, the first thing they think of is hybrid gas-electric cars. However, technological advancements in hybrids have resulted in......
- What Does It Take To Become A Search Engine Optimization Specialist? Search Engine Optimization or SEO has become quite a buzzword on the Internet for a number of years now. It seems that people claiming to be an SEO expert are a dime a dozen but many of these people only have a cursory knowledge on the matter and are only......