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" Inherits="TreeTest" %>

<!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%">
                    &nbsp;
                    <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>
LVL 36
Miguel OzSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Hi,
I can't duplicate the second issue

However the first one is because IE has a problem sizing a single cell when there are other cells with colespan in the same table, so unless each cell has a specific width, a colespan will cause it to truncate the 30px you have in style

A nested table solves this as below

on issue #3, yes you can set a minimum width or height ro your page or container using css with min-height & min-width, but you'll need some hacks to make this work on ie6.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeTest.aspx.cs" Inherits="TreeTest" %>

<!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%">
                    <table style="width:100%;">
                        <tr>
                            <td>
                                &nbsp;
                                <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>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <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>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Miguel OzSoftware EngineerAuthor Commented:
Thanks for the reply. I will look into it later.
Regarding issue 2:
I added this event to my original post:
protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 20; i++)
        {
            TreeNode node = new TreeNode("ENTRY " + i.ToString());
            TreeView1.Nodes.Add(node);
        }
    }

and added two screen shots:
1) Initial: when you open the page.
2) Issue 2: Notice that the bottom buttons are gone and the tree view does not resize and entries are missing from the IE window.

I would like to resize in the same way yahoo mail does. (meaning the treeview panes resizes and have a scrollbar if required.

initialscreen.jpg
issue-2-screen.jpg
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.