Solved

Adjust the tabel height in an ASP.NET page

Posted on 2010-08-22
6
461 Views
Last Modified: 2012-05-10
Hi all,

I have an ASP.NET page that has three tables. The first is the page title, the second is a data area and the third is the message area.

The first table (title) and the third (messages) has a fixed height. But, the second (data), should have its height adjusted to the maximum possible for all three tables shown in the same screen.

I post below a sample code of ASP.NET page, that can be changed by anyone to demonstrate the solution of the problem.

Thanks, Marcelo Camarate
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Form3.aspx.vb" Inherits="TreeView.Form3" %>

<!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>Example of adjusting the height of a table</title>
   
</head>
<body style="width: 100%; height: 100%">
    <form id="form1" runat="server" >
    <div>
        <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px">
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
                <td style="background-color: #ccffff; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
        </table>
        <br />
                <table cellpadding="0" cellspacing="0" style="width: 100%">
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
                <td style="font-weight: bold; vertical-align: middle; background-color: #ff99ff; text-align: center;">
                    This area should be adjusted according to the size of the screen and this text should be showed
                    in the center of the cell.</td>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
        </table>
        <br />
                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px">
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
                <td style="background-color: #99ff66; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area also has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:Marcelo Camarate
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 8

Expert Comment

by:Fareed Ali Khan
ID: 33496076
Hi,
try the following:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Form3.aspx.vb" Inherits="TreeView.Form3" %>

<!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>Example of adjusting the height of a table</title>
   
</head>
<body style="width: 100%; height: 100%">
    <form id="form1" runat="server" >
    <div>
	<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
                <td style="width: 100%; height: 50px;">

        <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px;">
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
                <td style="background-color: #ccffff; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
        </table>
</td></tr>
            <tr>
                <td style="width: 100%; height: auto;">
                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
                <td style="font-weight: bold; vertical-align: middle; background-color: #ff99ff; text-align: center;">
                    This area should be adjusted according to the size of the screen and this text should be showed
                    in the center of the cell.</td>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
        </table>
</td></tr>
            <tr>
                <td style="width: 100%; height: 50px;">
                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px;">
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
                <td style="background-color: #99ff66; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area also has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
        </table>
</td></tr>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 8

Expert Comment

by:Fareed Ali Khan
ID: 33496087
please append the table close tag before the div close tag. i forgot that one.  although it will not change the output.
0
 

Author Comment

by:Marcelo Camarate
ID: 33496285
Hi Farred,

Thank you for your quickly reply. But, apparently, don't worked. The cell that would to be adjusted according to the screen height remained unchanged.

Any other ideas?

Regards, Marcelo Camarate
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:Fareed Ali Khan
ID: 33496321
Hi,

attached test.html is working fine in IE6/IE7 and FF3.0. Please verify it.
Test.html
0
 
LVL 6

Expert Comment

by:hehdaddy
ID: 33496426
Sorry for the unintuitive class names. I moved the inline styles to classes and used jQuery to compute the height of the middle table cell. It works pretty good.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="th01.aspx.cs" Inherits="EE.TableHeight.WebForm1" %>

<!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>
      <style type="text/css">
            html, head, body, form
            {
                  padding: 0;
                  margin: 0;
            }
            
            #topTable
            {
                  position: absolute;
                  top: 0;
                  left: 0;
            }
            
            #bottomTable
            {
                  position: absolute;
                  bottom: 0;
                  left: 0;
            }
            
            #middleTable
            {
                  position: absolute;
                  top: 75px;
                  left: 0;
            }
            
            .sh1
            {
                  height: 20px;
                  width: 50px;
                  background-color: #66ffff;
                  font-size: 1px;
            }
            
            .mh1
            {
                  height: 20px;
                  background-color: #ccffff;
                  font-size: 1px;
            }
            
            .shc1
            {
                  width: 50px;
                  background-color: #66ffff;
                  height: 35px;
                  font-size: 1px;
            }
            
            .shc
            {
                  background-color: #ccffff;
                  height: 35px;
                  vertical-align: middle;
                  text-align: center;
                  font-weight: bold;                  
            }

            .sc1
            {
                  width: 50px;
                  height: 20px;
                  background-color: #9900ff;
                  font-size: 1px;
            }
            
            .mc1
            {
                  height: 20px;
                  background-color: #ff33ff;
            }
            
            .cc1
            {
                  width: 50px;
                  background-color: #9900ff;
                  font-size: 1px;
            }
            
            .c1
            {
                  font-weight: bold;
                  vertical-align: middle;
                  background-color: #ff99ff;
                  text-align: center;
            }
            
            .sf1
            {
                  height: 20px;
                  width: 50px;
                  background-color: #00cc33;
                  font-size: 1px;
            }
            
            .mf1
            {
                  height: 20px;
                  background-color: #99ff66;
                  font-size: 1px;
            }

            .sfc1
            {
                  width: 50px;
                  background-color: #00cc33;
                  height: 35px;
                  font-size: 1px;                  
            }
            
            .sfc
            {
                  background-color: #99ff66;
                  height: 35px;
                  vertical-align: middle;
                  text-align: center;
                  font-weight: bold;
            }

      </style>
      
      <script src="http://localhost:49159/jquery-1.4.2.min.js" type="text/javascript"></script>

      <script type="text/javascript">
            $(document).ready(function () {
                  // Resize the page on initial load.
                  ResizePage();

                  // Attach the resize event to the window and call the ResizePage
                  // function when it is fired.
                  $(window).resize(function () {
                        ResizePage();
                  });

                  // Set the height of the content cell to:
                  // The height of the window - the height of the header - the height of the footer -
                  // the height of the content header and footer.
                  function ResizePage() {
                        $(".c1").height($(window).height() -
                        $("#topTable").outerHeight() -
                        $("#bottomTable").outerHeight() -
                        ($(".sc1").height() * 2));
                  }
            });
      </script>

</head>
<body>
      <form id="form1" runat="server">
      <div>
            <table id="topTable" cellpadding="0" cellspacing="0" style="width: 100%;">
                  <tr>
                        <td class="sh1">&nbsp;
                        </td>
                        <td class="mh1">&nbsp;
                        </td>
                        <td class="sh1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="shc1">&nbsp;
                        </td>
                        <td class="shc">
                              This area has a fixed height = 35px
                        </td>
                        <td class="shc1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sh1">&nbsp;
                        </td>
                        <td class="mh1">&nbsp;
                        </td>
                        <td class="sh1">&nbsp;
                        </td>
                  </tr>
            </table>
            <table id="middleTable" cellpadding="0" cellspacing="0" style="width: 100%">
                  <tr>
                        <td class="sc1">
                        </td>
                        <td class="mc1">
                        </td>
                        <td class="sc1">
                        </td>
                  </tr>
                  <tr>
                        <td class="cc1">&nbsp;
                        </td>
                        <td class="c1">
                              This area should be adjusted according to the size of the screen and this text should
                              be showed in the center of the cell.
                        </td>
                        <td class="cc1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sc1">&nbsp;
                        </td>
                        <td class="mc1">&nbsp;
                        </td>
                        <td class="sc1">&nbsp;
                        </td>
                  </tr>
            </table>
            <table id="bottomTable" cellpadding="0" cellspacing="0" style="width: 100%;">
                  <tr>
                        <td class="sf1">&nbsp;
                        </td>
                        <td class="mf1">&nbsp;
                        </td>
                        <td class="sf1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sfc1">&nbsp;
                        </td>
                        <td class="sfc">
                              This area also has a fixed height = 35px
                        </td>
                        <td class="sfc1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sf1">&nbsp;
                        </td>
                        <td class="mf1">&nbsp;
                        </td>
                        <td class="sf1">&nbsp;
                        </td>
                  </tr>
            </table>
      </div>
      </form>
</body>
</html>
0
 
LVL 8

Accepted Solution

by:
Fareed Ali Khan earned 250 total points
ID: 33496433
Hi,

You should check the html after removing of the doc type declaration.

Remove the 2nd line of doc type from the html source of aspx page.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

749 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