Solved

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

Posted on 2010-11-29
5
883 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 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
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…

630 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