TreeView Relative Width

W4Rl0CK47

Hi, I need to render a TreeView control relative to the width of the window. I can place the TreeView in a

to show scrollbars, etc. but it seems that if I wish to set the control's width relative to the page size, so that it changes width as the user changes the window size using the mouse, I'm stuck. I can set a specific width and that works fine but if I try and set a relative column width, say 50%, the control ignores the width of whatever control it's in context of. The problem is that a user may have their resolution set to XGA or WUXGA so I need the flexibility of relative sizing as opposed to fixed. Thanks for any advice offered :)

ToddHileHoffer

Put the TreeView inside a div tag. The parent div tag should have the style display:block, width 100%;. Add a css class for the treeview set display:block, float:left, width:50%. Give that a try.

I didn't get any requirements for the signature

Abhishek Sur

Yes.. this is really a problem. Actually Treeview has a min-height specified. So if you resize, it wont go after a certain width. So you want the scrollbar to appear after it reaches a certain size. As it always holds its min width, you can set the width of the container to show the scrollbar of the container. Just place the treeview inside of a <div> with overflow:auto for width. For example <div style="width:128px;overflow:auto"> <asp:TreeView runat=... </div> Hope it solves your problem. You can use <asp:TreeView ID="TreeView1" runat="server" Width="178" ... to define width of the Treeview.

Abhishek Sur **Don't forget to click "Good Answer" if you like this Solution.

My Latest Articles-->** Simplify Code Using NDepend
Basics of Bing Search API using .NET
Microsoft Bing MAP using Javascript

W4Rl0CK47

I did that but the TreeView was instantiated at page load as the same width as the widest TreeViewItem. Further, when I selected an item in the TreeView, it subsequently *increased* the width of the TreeView to accommodate the selected item. As you can imagine, I'd like the page to load, and for the TreeView's width to always be governed by the size of the containing element, in this case, a table column and contained div. It seems that if I set a specific width for the TreeView, it remains at that width no matter how wide the TreeViewItems are. I just don't see why the TreeView control can't inherit its width from the containing element - where the table is defined as 100% the width of the page and the containing column is set to 50% of that.

W4Rl0CK47

I'm afraid that's exactly what I've tried doing. Placing the div around the control provides the TreeView with the scroll bars I need but it doesn't allow me to control the relative width of the TreeView. It seems the TreeView's width is governed by the width of the TreeView Items it contains unless the width is specified. Of course, if I resize the page, the TreeView remains at the same size which is fine if you know what resolution the user will be using, but if the user can display the page in anything from XGA to WUXGA, what looks fine on a low resolution screen will look pretty poor on a high res one :(

Abhishek Sur

Yes, as an user, it is not good to have horizontal scrollbar in place. Users generally dont like to scroll the horizontal scroll bars(at least web users). How about dealing width dynamically using JS ? You also need to have a minimum width set, so that every time the browser resizes, you need to trap browser resize event and set the size of it dynamically using javascript. I generally do make the site in certain fixed resolution, and leave blank space around the content when in high resolution... if full screen content is not required exactly. Depending on your requirement you need to make your site. :)

Abhishek Sur **Don't forget to click "Good Answer" if you like this Solution.

My Latest Articles-->** Simplify Code Using NDepend
Basics of Bing Search API using .NET
Microsoft Bing MAP using Javascript

W4Rl0CK47

Generally, speaking I do try and ensure I use fixed sizes for my ASP.NET sites. Unfortunately, in this instance, a user asked if the width of the TreeView could be increased. They're using a high-res screen but other users use laptops with relatively low-res screens. The content of the TreeView can be very wide which is why the high-res user wants to take advantage of the res they're working at. The only other thing I can think of is to use a fixed width and display a Tooltip showing the full text of a TreeViewItem that the mouse is positioned over. It really is a pain that the TreeView is so inflexible and it's unacceptable that it's never been fixed considering how long it's been available to developers :/ I now have to implement a fix which will be at best a compromise :(