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:
In IE 6 this looks good...
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&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&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:
P.s.: thanks to my colleague Markus Rheker for this one!
Carlo
'.NET > ASP.NET' 카테고리의 다른 글
[펌] 동적으로 웹 서버 컨트롤 템플릿 만들기 (0) | 2009.09.29 |
---|---|
닷넷 웹서비스 에서 WebLogic WebService Call 시 Connection 끊기는 문제... (0) | 2008.08.25 |
[ASP.NET] Response.End, Response.Redirect 또는 Server.Transfer를 사용하면 ThreadAbortException이 발생한다 (0) | 2008.04.18 |
[ASP.NET] HtmlTable 에 CSS CLASS 지정 (0) | 2008.02.27 |
masterpage 사용시 FindControl 이 불편하여 Reflection 으로 직접 컨트롤을 찾는다 (0) | 2007.10.11 |
Comments
# Anothr feed track -A developer's strayings
One new subscriber from Anothr Alerts
# Lineas entrecortadas en el TreeView ASP.NET
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
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
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
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
Excellent info 2nd link on goog
Thanks!!!
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
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
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
Superb! I've been trying to sort out these gaps for months...
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
thanks for the tip!
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
thanks a lot! I wouldn't find out..
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
Greate respect for solve this
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
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
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
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
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
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
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
Awesome!!! it works great surprisingly :)
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
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
Cheers for the good tip. Worked perfect.
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
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
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
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
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
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
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
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
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
Awesome solution to a common ASP problem!
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
Thank you SOOOOOO much. Worked perfectly!
# re: Broken line in ASP.NET 2.0 TreeView in IE 7
Thank you very much for this handy research