Solved

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

Posted on 2010-11-29
5
864 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
  • 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 500 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

830 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