• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 895
  • Last Modified:

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

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
iftech
Asked:
iftech
  • 3
  • 2
1 Solution
 
Carl TawnSystems and Integration DeveloperCommented:
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
 
iftechAuthor Commented:
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
 
iftechAuthor Commented:
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
 
Carl TawnSystems and Integration DeveloperCommented:
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
 
iftechAuthor Commented:
No need to close anymore. It was resolved.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now