AspNet TreeView - UI Issues

Question

I must admit I don't take pride in my UI skills - I have been working towards a SP Webpart functionality that involves 3 custom Treeviews of varying document libraries.

Issue with AspNet TreeView is that it renders in a different html table that forces it go out of the table structure of HTML. The Treeview gets to the bottom of the page breaking all the HTML norms.

I was able to move the Treeview to the desired location using CSS (position:relative;left:31%) etc but the problem I get is when I expand the Treeview, it expands on top of the other controls on the page (superimposes the expanded treeview on controls underneath it).

I have 3 Treeviews and ideally I'd like them to auto push/fit whatever content is underneath it whenever the treeview is expanded. I have tried CSS overflowsand a lot of other techniques but to no avail.

If anyone could guide me how and what kind of CSS I need to use to have the desired UI functionality I would be highly obliged.

Thanks in advance.

Answer 1

Sounds like you need to manipulate the DOM by moving the physical location of the element. I would use jQuery for this, it's pretty simple assuming your ASP Control has a static ID

<asp:TreeView ClientIDMode="Static" ...

So on Document.Ready or init, you basically cut & paste the treeview into the desired parent HTML node

$("#aspTreeView").appendTo("#spElement");

or

$("#aspTreeView").prependTo("#spElement");

Similarily, there are good responses to this post