TreeView expand/collapse images aren't aligned with node text

Question

0.00/5 (No votes)

See more:

I've built a TreeView in ASP.NET 3.5 and it works great, except the expand and collapse images (which are 20px by 20px) do not align properly with the text in the nodes.

Below is a link to the screen shot of the applicable tree, with all items selected to allow you to see where the items are lined up. I need the text to be vertically centered (by one means or another) so it lines up with the center of its expand/collapse image.

I've tried numerous tricks to make this happen, including CSS, but can't seem to find the right technique. In particular, my CSS seems to be ignored.

Any and all suggestions will be appreciated.

http://lifetimelegacies.com/TreeView.png

Posted 20-Jul-10 6:26am

Gawiz

Add a Solution

Comments

Sandeep Mewara 20-Jul-10 13:47pm

If you feel like CSS is ignord then it is not getting applied at all. Try some border or back color to make sure it is working.
From image, texts needs vertical alignment to be set.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Gawiz · Answer 1 · 2010-07-20T08:43:00

Thanks Sandeep -

I've tried dozens of variations to get the CSS applied, but so far with no luck. I agree that it looks like vertical-alignment:middle should work but how to get it applied?

The CSSStyle attributes in the TreeView seem to apply to the node text only.

I even tried wrapping the whole tree in a div tag with a style treestick as:

.treestick td {vertical-align:middle !important;} but that has no effect either. Nor, so far, has putting up a border - it just doesn't show up. When I look in Firefox at the CSS for the div, it shows that it's being used, but yet it doesn't show up.

Could it be that the TreeView control itself somehow overrides all my attempts? I know that they create their own id's when rendered and they include inline styling - but I haven't been able to get that modified.

The really strange thing is that every time you see a tree the +/- are aligned perfectly with the text, yet mine isn't. So it makes sense that I'm doing something somewhere to affect this.

I'm using nested master pages and have the tree in the left column of the layout. It's also inside a Panel so I can manage the auto scroll bars. My CSS file is referenced in the top master page and all that styling works fine everywhere else in the page - just have a problem with the tree.

Is it really possible to apply styles to the tree other than the built-in attributes?

Thanks - Steve

Gawiz · Answer 2 · 2010-07-22T13:45:00

The problem was that the td tags generated by the control had vertical-align:baseline. This occurred because at the top of my CSS file I have a "big reset" that sets the style of 59 tags to default values - having the effect of making any browser's behavior the same as any other's.

But, then I was not able to override that to have vertical-align:middle for these tags. There are no built-in styles in the TreeView control that affect td tags.

So I applied a Panel control around the TreeView and set the height, width, and overflow attributes from within VS, and added a CSSClass file 'tree'. This didn't seem to have the desired effect either. Then I found info from Microsoft that using both inline and external styles in a single control could produce "unpredictable" results.

I removed the inline styles and included them in the CSSClass file as follows:

.tree {height... width... overflow...} and .tree td {vertical-align:middle;}

Initially, this styling didn't get applied either, so I tried two further steps.

1) I rebuilt the entire site

2) I cleared the cache in Firefox

The styles were applied correctly and the tree now displays as expected in the browser.

Problem solved!

TreeView expand/collapse images aren't aligned with node text

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0