|
|
Rank: Member
Groups: Member
Joined: 6/12/2013
Posts: 13
|
Hello All,
I'm experiencing a display issue with the TreeView control when I'm updating some of my pages to HTML5. For some reason the rendered html tables that make up the TreeView control seem to have extra padding around them but when I try to remove the padding using developer tools it does not seem to work. Any suggestions?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
This usually has to do with your CSS. If you have a CSS rule that applies padding to all table element, then the tables inside the TreeView will pick it up too. In that case you will need to find out the offending CSS rule and modify that rule.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 6/12/2013
Posts: 13
|
I thought this might be a problem as well but my control declaration has 0px padding and margin specified...
Code: HTML/ASPX
<eo:TreeView ID="trvRptFolders" runat="server" ClientSideOnItemClick="loadReports"
ControlSkinID="None" RaisesServerEvent="False" Height="100%">
<TopGroup Style-CssText="border-width:0px;color:black;cursor:pointer;font-family:Tahoma;font-size:10pt;padding:0px;margin: 0px;"> </TopGroup>
<LookNodes>
<eo:TreeNode CollapsedImageUrl="00030405" ExpandedImageUrl="00030302" ImageUrl="00030405" ItemID="_Default"
DisabledStyle-CssText="border-width:0px;background-color:transparent;border-style:none;color:Gray;padding:0px;margin: 0px;"
NormalStyle-CssText="border-width:0px;padding: 0px; color: black;border-style: none;background-color: transparent;margin: 0px;"
SelectedStyle-CssText="border-width:0px;background-color:#027dc3;border:solid 1px #999999;color:White;padding:0px;margin: 0px;">
</eo:TreeNode>
</LookNodes>
</eo:TreeView>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi, We are talking about CSS rules such as:
If you have such a CSS rule in your page or any of the CSS file used by your page, then the padding will apply to any TD element, including TD elements created by the TreeView. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 6/12/2013
Posts: 13
|
Sorry, I didn't specify but there is no external stylesheet or table, tbody, thead, tr, or td styles on the document.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
Then you can isolate the problem into a test page and post the test page. Once we have that we will try to run it here and see what we can find. You may also want to post a screenshot to demonstrate exactly which part is the padding that you do not want (you will need to post it somewhere else and then include a link here because our forum does not allow you to upload pictures).
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 6/12/2013
Posts: 13
|
This isn't for a publicly viewed app, thx for the help though.
|
|
Rank: Member
Groups: Member
Joined: 6/12/2013
Posts: 13
|
I've made some forward progress with the issue. I'm running IE 9 and when I ran it in Compatibility View my issues were solved so I added the following to my page...
Code: HTML/ASPX
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This solved my IE issues but is not technically HTML5 compliant (I can live with it). It still does not render properly in Chrome or Firefox so I'll be tackling that next.
|
|
Rank: Member
Groups: Member
Joined: 6/12/2013
Posts: 13
|
So my last attempt at just using an emulator to solve my problems only worked for IE and I had to call an audible and fix the real problem to get where I needed to be for all the big browsers my company uses (Chrome, Firefox, IE). Basically when I would check out the source in Dev Tools each table used to build the tree was carving out a height of 22.75px for itself even though I had specified a set height at 20px. Here's my solution that seems to work across all platforms so far...
Code: CSS
#idOfMyTreeview table { height: 20px; padding: 0px; margin: 0px 0px -2.75px 0px; border-width: 0px; }
In IE it looks perfect. Chrome and Firefox looks slightly off with the tiniest gaps in the outermost branches.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Thanks for sharing. We still feel this has to do with other CSS rules in your page (The dev tools should be able to tell you exactly where it gets that height value from). However we are glad to hear that you have found a solution.
|
|
Rank: Member
Groups: Member
Joined: 6/12/2013
Posts: 13
|
There was no specific height set till I put it there and the TreeView was ignoring it. If I could post images here to show you I would. If you traced the styles back you could see where I set the height at 20px but when looking at height under IE Dev Tools Layout the height was set at 22.75px with no padding or border or margin or offset listed. I know the solution is a hack but it seems to work for now. I thought it might be related to the images used in the tree (i.e. folder, line, open, close) but I tried setting borders, margin, and padding at 0px on all those and that didn't work, I'm still not convinced though that that was not the problem.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
We won't be able to tell you much until we can have a test page so that we can look further. If you wish us to do that, you can produce a test page and post the test page (do not give us your actual project page, we need a self contained test page that can reproduce the problem so that we can run it here to see the problem). I do understand that your current solution might work reasonably well for you, so if that's acceptable to you, then we can consider this issue closed.
Thanks!
|
|