Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

asp.net C# dynamically created table doesn't display correctly

Posted on 2010-11-29
5
Medium Priority
?
888 Views
Last Modified: 2012-05-10
Hi all,

I'm trying to create a dynamically create a calendar table. I know there is an asp calendar control however I need to do it this way.
my issue is I set height and width of the table to 100% but when it renders only width is 100%
Here is the code to generate it:
 
protected Table BuildCalendar()
    {
        Table tblCal = new Table();
        tblCal.Attributes.Add("cellspacing","1");
        tblCal.Attributes.Add("height", "100%");
        tblCal.Attributes.Add("width", "100%");
        tblCal.Attributes.Add("border", "1");
        //tblCal.Height = System.Web.UI.WebControls.Unit.Percentage(100);
        //tblCal.Width = System.Web.UI.WebControls.Unit.Percentage(100);
        

        //previous month hyperlink and cell
        TableHeaderCell hdrPrevMonth = new TableHeaderCell();
        HyperLink hyprPrevMonth = new HyperLink();
        hyprPrevMonth.ImageUrl = "images/arrow_left.gif";
        hyprPrevMonth.NavigateUrl = "calendar.aspx?M=" + DateAndTime.Month(DateAndTime.DateAdd("M", -1, theCalendarDate)) + "&D=1&Y=" + DateAndTime.Year(DateAndTime.DateAdd("M", -1, theCalendarDate));
        hdrPrevMonth.Controls.Add(hyprPrevMonth);

        //Month name and year cell
        TableHeaderCell hdrMonthName = new TableHeaderCell();
        hdrMonthName.ColumnSpan = 5;
        hdrMonthName.Text = theCalendarDate.ToString("MMMM") + " " + theCalendarDate.Year;

        //Next month hyperlink and cell
        TableHeaderCell hdrNextMonth = new TableHeaderCell();
        HyperLink hyprNextMonth = new HyperLink();
        hyprNextMonth.ImageUrl = "images/arrow_right.gif";
        hyprNextMonth.NavigateUrl = "calendar.aspx?M=" + DateAndTime.Month(DateAndTime.DateAdd("M", 1, theCalendarDate)) + "&D=1&Y=" + DateAndTime.Year(DateAndTime.DateAdd("M", 1, theCalendarDate));
        hdrNextMonth.Controls.Add(hyprNextMonth);

        //adding cells to Month hearder row
        TableHeaderRow hdrMonthRow = new TableHeaderRow();
        hdrMonthRow.CssClass = "CalendarMonth";
        hdrMonthRow.Cells.Add(hdrPrevMonth);
        hdrMonthRow.Cells.Add(hdrMonthName);
        hdrMonthRow.Cells.Add(hdrNextMonth);

        //Add header month header row to table
        tblCal.Rows.Add(hdrMonthRow);

        //Week days header row
        TableHeaderRow hdrDaysRow = new TableHeaderRow();
        string[] strDaysArray = new string[7] {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};
        
        //Building Header cells for days of the week and adding to days header row
        foreach (string day in strDaysArray)
        {
            TableHeaderCell hdrDay = new TableHeaderCell();
            hdrDay.CssClass = "CalendarDays";
            hdrDay.Text = day;
            hdrDaysRow.Cells.Add(hdrDay);
        }

        //add days header row to table
        tblCal.Rows.Add(hdrDaysRow);

        //Building Calender date days
        do
        {
            TableRow tr = new TableRow();

            for (int Z = 1; Z <= 7; Z++)
            {
                TableCell tc = new TableCell();
                if (DateAndTime.Month(theRunningCalendarDate) == theCalendarMonth)
                {
                    int Y = DateAndTime.Weekday(theRunningCalendarDate, Microsoft.VisualBasic.FirstDayOfWeek.Sunday);
                    if (Y == 1 || Y == 7)
                    {
                        theCalendarBackcolor = "#edf2f8";
                    }
                    else
                    {
                        theCalendarBackcolor = "#FFFFFF";
                    }

                    if (DateAndTime.Day(theRunningCalendarDate) == theCalendarDay)
                    {
                        theCalendarBackcolor = "#979e51";
                    }
                }
                else
                {
                    theCalendarBackcolor = "#EBEBEB";
                }

                thePrintedDay = DateAndTime.Day(theRunningCalendarDate).ToString();
                if (theRunningCalendarDate == Convert.ToDateTime(DateAndTime.MonthName(DateAndTime.Month(DateTime.Now), false) + " " + DateAndTime.Day(DateTime.Now) + ", " + DateAndTime.Year(DateTime.Now)))
                {
                    thePrintedDay = "<b>" + thePrintedDay + "</b>";
                }

                theRunningCalendarDate = DateAndTime.DateAdd("d", 1, theRunningCalendarDate);
                tc.Style.Add("cursor", "hand");
                tc.BackColor = System.Drawing.Color.FromName(theCalendarBackcolor);
                tc.Width = System.Web.UI.WebControls.Unit.Percentage(14);
                tc.VerticalAlign = VerticalAlign.Top;
                tc.Text = thePrintedDay;

                tr.Cells.Add(tc);
            }
            tblCal.Rows.Add(tr);
        } while (theRunningCalendarDate <= (Convert.ToDateTime(DateAndTime.MonthName(theCalendarMonth, true) + " " + theLastDay + ", " + theCalendarYear)));

        return tblCal;
    }

Open in new window


When it renders it look like this:
  Cal
I need to look like this:
 Cal3
I will include the style sheet even though I don't think there is any thing in there that would over ride the height.
 Style.css

thanks for the help.
0
Comment
Question by:iftech
[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
  • 3
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 34231052
Height of 100% means 100% of the height of the parent element, not necessarily the height of the page. It's impossible to say what you need to change without seeing the table markup in context.
0
 

Author Comment

by:iftech
ID: 34231220
thanks but there is nothing but a placeholder. here it is.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %>

<!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>Calendar</title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#FFFFFF; color:#000000; margin-top:0; margin-left:0" >
    <form id="form1" runat="server">
        <asp:PlaceHolder ID="plcCal" runat="server" />      
    </form>
</body>
</html>
0
 

Author Comment

by:iftech
ID: 34231445
This might help as well ; )



<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

      Calendar

</title><link href="Style.css" rel="stylesheet" type="text/css" /></head>

<body style="background-color:#FFFFFF; color:#000000; margin-top:0; margin-left:0" >

    <form name="form1" method="post" action="calendar.aspx?M=12&amp;D=1&amp;Y=2010" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTEyMDI3NDAzMmRkMy01A3FJ94tj7Plzro9o8HJIr/0=" />

</div>



        <table cellspacing="0" border="1" border="0" style="height:100%;width:100%;">

      <tr class="CalendarMonth">

            <th><a href="calendar.aspx?M=11&amp;D=1&amp;Y=2010"><img src="images/arrow_left.gif" style="border-width:0px;" /></a></th><th colspan="5">December 2010</th><th><a href="calendar.aspx?M=1&amp;D=1&amp;Y=2011"><img src="images/arrow_right.gif" style="border-width:0px;" /></a></th>

      </tr><tr>

            <th class="CalendarDays">Sun</th><th class="CalendarDays">Mon</th><th class="CalendarDays">Tue</th><th class="CalendarDays">Wed</th><th class="CalendarDays">Thu</th><th class="CalendarDays">Fri</th><th class="CalendarDays">Sat</th>

      </tr><tr>

            <td valign="top" style="background-color:#EBEBEB;">28</td><td valign="top" style="background-color:#EBEBEB;"><b>29</b></td><td valign="top" style="background-color:#EBEBEB;">30</td><td valign="top" style="background-color:#979e51;">1</td><td valign="top" style="background-color:#FFFFFF;">2</td><td valign="top" style="background-color:#FFFFFF;">3</td><td valign="top" style="background-color:#edf2f8;">4</td>

      </tr><tr>

            <td valign="top" style="background-color:#edf2f8;">5</td><td valign="top" style="background-color:#FFFFFF;">6</td><td valign="top" style="background-color:#FFFFFF;">7</td><td valign="top" style="background-color:#FFFFFF;">8</td><td valign="top" style="background-color:#FFFFFF;">9</td><td valign="top" style="background-color:#FFFFFF;">10</td><td valign="top" style="background-color:#edf2f8;">11</td>

      </tr><tr>

            <td valign="top" style="background-color:#edf2f8;">12</td><td valign="top" style="background-color:#FFFFFF;">13</td><td valign="top" style="background-color:#FFFFFF;">14</td><td valign="top" style="background-color:#FFFFFF;">15</td><td valign="top" style="background-color:#FFFFFF;">16</td><td valign="top" style="background-color:#FFFFFF;">17</td><td valign="top" style="background-color:#edf2f8;">18</td>

      </tr><tr>

            <td valign="top" style="background-color:#edf2f8;">19</td><td valign="top" style="background-color:#FFFFFF;">20</td><td valign="top" style="background-color:#FFFFFF;">21</td><td valign="top" style="background-color:#FFFFFF;">22</td><td valign="top" style="background-color:#FFFFFF;">23</td><td valign="top" style="background-color:#FFFFFF;">24</td><td valign="top" style="background-color:#edf2f8;">25</td>

      </tr><tr>

            <td valign="top" style="background-color:#edf2f8;">26</td><td valign="top" style="background-color:#FFFFFF;">27</td><td valign="top" style="background-color:#FFFFFF;">28</td><td valign="top" style="background-color:#FFFFFF;">29</td><td valign="top" style="background-color:#FFFFFF;">30</td><td valign="top" style="background-color:#FFFFFF;">31</td><td valign="top" style="background-color:#EBEBEB;">1</td>

      </tr>

</table>      

    </form>

</body>

</html>
0
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 2000 total points
ID: 34231831
Try adding a 100% height to both the <body> and <form> elements as well. That should then give some the 100% on the table some meaning.  
0
 

Author Comment

by:iftech
ID: 34248897
No need to close anymore. It was resolved.
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

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

Introduction Hi all and welcome to my first article on Experts Exchange. A while ago, someone asked me if i could do some tutorials on object oriented programming. I decided to do them on C#. Now you may ask me, why's that? Well, one of the re…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Suggested Courses

705 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