We help IT Professionals succeed at work.
Get Started
How to scale a html table component
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>
Why Experts Exchange?
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
Jim Murphy
Programmer at Smart IT Solutions
When asked, what has been your best career decision?
Deciding to stick with EE.
Mohamed Asif
Technical Department Head
Being involved with EE helped me to grow personally and professionally.
Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question
Connect with Certified Experts to gain insight and support on specific technology challenges including:
- Troubleshooting
- Research
- Professional Opinions
Did You Know?
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE