?
Solved

style.height not changing the control size in a content page

Posted on 2007-12-06
4
Medium Priority
?
595 Views
Last Modified: 2008-02-01
I have changed an asp.net 2.0 web page to use a masterfilepage, and previous javascript is no longer working.  Here is my masterpagefile:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MyMaster.master.cs" Inherits="WebProject.Mymaster" %>
<!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>Untitled Page</title>
    <link href="StyleSheet/MyStyle.css" type="text/css" rel="stylesheet"/>
      <script language="javascript" src="Libraries/setResolution.js" type="text/javascript"></script>
</head>
<body topmargin="0" leftmargin="0" onload="setHeight();">
<!--Custom control here/-->
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Here is my content page:

<%@ Page language="c#" Codebehind="MyPage.aspx.cs" AutoEventWireup="True" MasterPageFile="~/MyMaster.Master" Inherits="WebProject.MyPage" %>
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
                  <asp:Table id="tblBody" CellPadding="0" CellSpacing="0" Width="90%" CssClass="page_body"
                        HorizontalAlign="Center" Runat="server">
                        <asp:TableRow>
                              <asp:TableCell VerticalAlign="Top">
                                    <!-- <asp:Table for all the content starts here -->
                                    <asp:Table id="ContentTable" CssClass="page_link" cellspacing="0" cellpadding="0" width="100%" Runat="server" height="100%">
                                          <asp:TableRow ID="Row1" Runat="server" >
                                                <asp:TableCell HorizontalAlign="center"  VerticalAlign="Middle" height="15%" >
                                                      <asp:LinkButton ID="Link1" Runat="server">TestLink</asp:LinkButton>
                                                </asp:TableCell>
                                          </asp:TableRow>                   
                                          <asp:TableRow ID="Row2" Runat="server" >
                                                <asp:TableCell HorizontalAlign="center"  VerticalAlign="Middle" height="15%">
                                                      <asp:LinkButton ID="Linke2" Runat="server">Test2</asp:LinkButton>
                                                </asp:TableCell>
                                          </asp:TableRow>
                                          <asp:TableRow ID="Row3" Runat="server" >
                                                <asp:TableCell HorizontalAlign="center"  VerticalAlign="Middle" height="15%">
                                                      <asp:LinkButton ID="Link3" Runat="server">Test3</asp:LinkButton>
                                                </asp:TableCell>
                                          </asp:TableRow>
                                                                                    <asp:TableRow height="10%">
                                                <asp:TableCell>&nbsp;</asp:TableCell>
                                          </asp:TableRow>
                                    </asp:Table>
                              </asp:TableCell>
                        </asp:TableRow>
                  </asp:Table>
</asp:Content>

Here is my stylesheet:
.page_body
{
      background-color:#ffffff;
      border-left: 2px solid;
      border-right: 2px solid;
      border-top: 2px solid;
      border-bottom: 2px solid;
      border-color:navy;
      margin-left: 25px;
      margin-right:25px;
}
/* End  */
      
/* Start of Style for Page Links */      
.page_link{      
         font-family: Arial;      
         font-size: 12px;      
         Color:#3161A9;      
         font-weight: Normal;
         }
        
   .page_link a:link{color:#3161A9; font-family: Arial; font-size:12px; text-decoration: none;}
   .page_link a:visited{color:#800080;font-family: Arial; font-size:12px;text-decoration: none;}
   .page_link a:active{color:#0000FF;font-family: Arial; font-size:12px; text-decoration: none; }
   .page_link a:hover{color:#0000ff;font-family:Arial;font-size:12px; text-decoration: underline;}

And finally, here is my javascript:
function setHeight()
{
  var y=screen.height;
  var obj = document.getElementById('ctl00_ContentPlaceHolder1_tblBody');

  if(obj==null)
  {
  //Do Nothing
  }
  else
  {
      obj.style.height=(y==768?'64%':'50%');
  }
}

Before I added the master page, tblBody expanded to the correct size on the onload event.  However, now the table does not change height.  I've stepped through the javascript, and obj is assigned to the correct element.  Am I trying to go about this the wrong way?
0
Comment
Question by:sarah_newcom
[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
  • 2
  • 2
4 Comments
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 20423800
do an alert(obj.offsetHeight);

Does that give you a value at all?
0
 

Author Comment

by:sarah_newcom
ID: 20427122
alert(obj.offsetHeight) gives me a value of 64.  Should I be changing that property intead of style.height?  Thanks!
0
 

Author Comment

by:sarah_newcom
ID: 20444271
FYI.. found a workaround at least.  For some reason, the percentage did modify the control height, just not the way I wanted.  I changed the code to calculate the number of px the control should be and everything is working again.
0
 
LVL 12

Accepted Solution

by:
GoofyDawg earned 2000 total points
ID: 20446439
Cool. Then you should just cancel this question.
0

Featured Post

Quick Cloud Training

Looking for some quick training on the cloud in 2 hours or less? Check out these how-to guides in AWS, Linux, OpenStack, Azure, and more!

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

719 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