troubleshooting Question
How to scale a html table component
asked on
I would like to allow resizing to my attached web page so that the issues described below are resolved. (code is done in asp.net 2.0 for IE 6,7,8 browsers)
The web page is made up of two treeviews (these treeview can contain 20+ nodes) and task buttons. It is part of a bigger page but I just extracted the bits I need to ask the question.
If the user resizes the page I would like the internal components to resize as well. At the moment the following issues can be found.
1) The button 1 and 2 cell is not readjusting its width to 30 pixels as stated in the mark up.
2) If user makes the web page smaller, buttons 3 and 4 disappear. Furthermore the tree views do not scale and the information gets truncated. (Ideally I would like to see that user can resize up to a minimum limit and then a scrollbar should appear)
3) Is there a way to setup a minimum value that the page can display?
Markup sample
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeTest.aspx.cs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" >
<div>
<table style="width: 100%; height: 100%;">
<tr>
<td style="height: 40%">
<asp:Panel ID="Panel1" runat="server" BorderColor="#0033CC" BorderStyle="Solid">
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True">
</asp:TreeView>
</asp:Panel>
</td>
<td style="width: 30px" bgcolor="Yellow">
<div>
<asp:Button ID="Button1" runat="server" Text="->" />
</div>
<div>
<asp:Button ID="Button2" runat="server" Text="<-" />
</div>
</td>
<td>
<asp:Panel ID="Panel2" runat="server" BorderColor="Lime" BorderStyle="Solid">
<asp:TreeView ID="TreeView2" runat="server" ShowLines="True">
</asp:TreeView>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="3">
<div style="float: left">
<asp:Button ID="Button3" runat="server" Text="Task 1" />
</div>
<div style="float: right">
<asp:Button ID="Button4" runat="server" Text="Task 2" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
The web page is made up of two treeviews (these treeview can contain 20+ nodes) and task buttons. It is part of a bigger page but I just extracted the bits I need to ask the question.
If the user resizes the page I would like the internal components to resize as well. At the moment the following issues can be found.
1) The button 1 and 2 cell is not readjusting its width to 30 pixels as stated in the mark up.
2) If user makes the web page smaller, buttons 3 and 4 disappear. Furthermore the tree views do not scale and the information gets truncated. (Ideally I would like to see that user can resize up to a minimum limit and then a scrollbar should appear)
3) Is there a way to setup a minimum value that the page can display?
Markup sample
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeTest.aspx.cs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" >
<div>
<table style="width: 100%; height: 100%;">
<tr>
<td style="height: 40%">
<asp:Panel ID="Panel1" runat="server" BorderColor="#0033CC" BorderStyle="Solid">
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True">
</asp:TreeView>
</asp:Panel>
</td>
<td style="width: 30px" bgcolor="Yellow">
<div>
<asp:Button ID="Button1" runat="server" Text="->" />
</div>
<div>
<asp:Button ID="Button2" runat="server" Text="<-" />
</div>
</td>
<td>
<asp:Panel ID="Panel2" runat="server" BorderColor="Lime" BorderStyle="Solid">
<asp:TreeView ID="TreeView2" runat="server" ShowLines="True">
</asp:TreeView>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="3">
<div style="float: left">
<asp:Button ID="Button3" runat="server" Text="Task 1" />
</div>
<div style="float: right">
<asp:Button ID="Button4" runat="server" Text="Task 2" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.