[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

How to scale a html table component

Posted on 2010-03-25
3
Medium Priority
?
395 Views
Last Modified: 2012-05-09
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>
0
Comment
Question by:Miguel Oz
2 Comments
 
LVL 22

Accepted Solution

by:
remorina earned 2000 total points
ID: 28651183
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
 
LVL 36

Author Comment

by:Miguel Oz
ID: 28743285
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question