troubleshooting Question

How to scale a html table component

Avatar of Miguel Oz
Miguel OzFlag for Australia asked on
ASP.NETHTMLC#
2 Comments1 Solution418 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
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.

-Mike Kapnisakis, Warner Bros