Broken line in ASP.NET 2.0 TreeView in IE 7

Anothr feed track -A developer's strayings

anothr user — Thu, 24 May 2007 17:35:37 GMT

One new subscriber from Anothr Alerts

Lineas entrecortadas en el TreeView ASP.NET

Blog Comunitario — Tue, 12 Jun 2007 19:46:25 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Matthew Weaver — Sun, 08 Jul 2007 08:20:13 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Carlo Cardella — Sun, 08 Jul 2007 22:20:39 GMT

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?

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Robotacon — Tue, 31 Jul 2007 17:11:01 GMT

Matthew Weaver prolly forgot this step:

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Boogie — Wed, 08 Aug 2007 15:08:00 GMT

Excellent info 2nd link on goog

Thanks!!!

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Karl — Sat, 25 Aug 2007 01:51:47 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Asu — Fri, 21 Sep 2007 21:26:09 GMT

Excellent job :) the only reason i wasn't using the css adapted treeview was for the lines.

re: Broken line in ASP.NET 2.0 TreeView in IE 7

david smith — Fri, 28 Sep 2007 19:47:56 GMT

Superb! I've been trying to sort out these gaps for months...

re: Broken line in ASP.NET 2.0 TreeView in IE 7

xh — Sat, 29 Sep 2007 06:00:23 GMT

thanks for the tip!

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Jaacob — Tue, 02 Oct 2007 13:38:34 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Pavel — Wed, 17 Oct 2007 09:24:35 GMT

Greate respect for solve this

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Ralph de Ruijter — Fri, 19 Oct 2007 12:37:17 GMT

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!

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Eddy — Wed, 31 Oct 2007 19:03:29 GMT

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.

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Carlo Cardella — Sun, 04 Nov 2007 03:48:00 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

kspriggs — Thu, 24 Jan 2008 05:49:00 GMT

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?

re: Broken line in ASP.NET 2.0 TreeView in IE 7

danteman — Tue, 05 Feb 2008 16:39:20 GMT

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?

re: Broken line in ASP.NET 2.0 TreeView in IE 7

kspriggs — Tue, 11 Mar 2008 03:54:58 GMT

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??

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Vinod Nair — Thu, 03 Apr 2008 15:42:35 GMT

Awesome!!! it works great surprisingly :)

re: Broken line in ASP.NET 2.0 TreeView in IE 7

eXiaMike — Tue, 15 Apr 2008 12:55:55 GMT

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; }

;)

re: Broken line in ASP.NET 2.0 TreeView in IE 7

David H — Fri, 18 Apr 2008 09:15:13 GMT

Cheers for the good tip. Worked perfect.

re: Broken line in ASP.NET 2.0 TreeView in IE 7

vinod j nair — Wed, 23 Apr 2008 10:15:05 GMT

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.

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Carlo Cardella — Wed, 23 Apr 2008 11:52:34 GMT

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; }

[...]

re: Broken line in ASP.NET 2.0 TreeView in IE 7

vinod j nair — Thu, 24 Apr 2008 14:47:12 GMT

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.

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Carlo Cardella — Thu, 24 Apr 2008 14:57:22 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

MrShovel — Thu, 01 May 2008 05:22:51 GMT

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.

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Scott Johnson — Mon, 02 Jun 2008 04:18:23 GMT

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; }

re: Broken line in ASP.NET 2.0 TreeView in IE 7

M.E.S.H — Sun, 15 Jun 2008 23:58:14 GMT

Worked fine in IE7, FF 2 and Opera 9.25.

Many thx to you and Markus Rheker !

/M.E.S.H

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Jesse Myer — Fri, 27 Jun 2008 17:20:20 GMT

Awesome solution to a common ASP problem!

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Steve — Mon, 30 Jun 2008 15:24:37 GMT

Thank you SOOOOOO much. Worked perfectly!

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Andrey — Fri, 25 Jul 2008 13:43:20 GMT

Thank you very much for this handy research

re: Broken line in ASP.NET 2.0 TreeView in IE 7

John — Wed, 13 Aug 2008 15:51:18 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Carlo Cardella — Wed, 13 Aug 2008 16:29:29 GMT

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

<style>

.tree td div

{

height: 100% !important;

}

</style>

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Jason Cabot — Wed, 27 Aug 2008 23:48:03 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Shailesh Bakadia — Thu, 25 Sep 2008 11:34:10 GMT

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 :)

re: Broken line in ASP.NET 2.0 TreeView in IE 7

allenhuang007@tom.com — Thu, 13 Nov 2008 11:48:41 GMT

i still have this problem.Any other solutions?

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Thu, 20 Nov 2008 11:24:42 GMT

mee too

i still have the problem !

please help me..

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Carlo Cardella — Fri, 21 Nov 2008 10:26:06 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Scott — Mon, 08 Dec 2008 20:09:39 GMT

Awesome fix! Thanks for your time.

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Valamas — Sun, 28 Dec 2008 13:27:56 GMT

You rock!

Thanks and happy new year,

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Me — Tue, 17 Feb 2009 23:21:35 GMT

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

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Gil.Y — Thu, 05 Mar 2009 15:55:11 GMT

Silly!!!! We all been so silly till now :)

ASP.NET 2.0 TreeView控件在IE7中断开的连接线

涟漪勇 — Thu, 19 Mar 2009 09:55:48 GMT

原文：http://blogs.msdn.com/carloc/archive/2007/05/23/broken-line-in-asp-net-2-0-treeview-in-ie-7.aspx...

re: Broken line in ASP.NET 2.0 TreeView in IE 7

Viji — Wed, 02 Dec 2009 00:07:46 GMT

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?