title: ASP.NET CalendarExtender Customized Height Problems
body: <h1>The Problem</h1>
  
  <p>Let me vent first, this control has got to be the worst control ever, unless you want it EXACTLY like how they customized it AWESOME, else good luck.</p>
  
  <p>I have done a lot of tweaking with the CSS file and I think I have a good grasp around how everything has been set up. My problem is that I modified the height of this control and now it will show a partial amount of the day names on the bottom if you are viewing the months or years. After debugging this to find out why I have found that the control is hard coding the position of the days below the month view and since I have changed the height of the control this is off by roughly 15px. The exact markup that is causing the problem is:</p>
  
  <pre><code>style="position: absolute; left: 0px; top: 139px;"
  </code></pre>
  
  <p>And I have confirmed this by editing the top value to 155px and everything is great.</p>
  
  <p>My question is, how can I go about to fix this? </p>
  
  <p>TL;DR - How do you change the height for the CalendarExtender?</p>
  
  <h2>ScreenShot</h2>
  
  <p><img src="https://i.stack.imgur.com/90VMK.jpg" alt="enter image description here"></p>
  
  <h2>Design View</h2>
  
  <pre><code>&lt;table class="DataSelection"&gt;
      &lt;tr&gt;
          &lt;th class="DataSelectionTableHeader"&gt;Employee Selection&lt;/th&gt;
          &lt;th class="DataSelectionTableHeader"&gt;Start Date&lt;/th&gt;
          &lt;th class="DataSelectionTableHeader"&gt;End Date&lt;/th&gt;
          &lt;th class="DataSelectionTableHeader"&gt;View By&lt;/th&gt;
          &lt;th class="DataSelectionTableHeader"&gt;Submit&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="DataSelectionTableData"&gt;
              &lt;asp:DropDownList ID="ddlEmployee" runat="server"  DataTextField="Employee_Name" DataValueField="Employee_ID" AutoPostBack="false" Width="150" /&gt;
          &lt;/td&gt;
          &lt;td class="DataSelectionTableData"&gt;
              &lt;asp:TextBox ID="tbxCalExtenderStart" runat="server" Height="16" /&gt;
              &lt;asp:CalendarExtender ID="calExtenderStart" runat="server" Animated="true" FirstDayOfWeek="Sunday" PopupPosition="BottomRight" 
                  TargetControlID="tbxCalExtenderStart" CssClass="Calendar" DefaultView="Days" PopupButtonID="popupButtonStart" /&gt;
              &lt;asp:Image ID="popupButtonStart" runat="server" src="Assets/Images/Icons/Calendar.png" height="16" width="16" CssClass="PopupImg" /&gt;
          &lt;/td&gt;
          &lt;td class="DataSelectionTableData"&gt;
              &lt;asp:TextBox ID="tbxCalExtenderEnd" runat="server" Height="16" /&gt;
              &lt;asp:CalendarExtender ID="calExtenderEnd" runat="server" Animated="true" FirstDayOfWeek="Sunday" PopupPosition="BottomRight" 
                  TargetControlID="tbxCalExtenderEnd" CssClass="Calendar" DefaultView="Days" PopupButtonID="popupButtonEnd" /&gt;
              &lt;asp:Image ID="popupButtonEnd" runat="server" src="Assets/Images/Icons/Calendar.png" height="16" width="16" CssClass="PopupImg" /&gt;
          &lt;/td&gt;
          &lt;td class="DataSelectionTableData"&gt;
              &lt;asp:DropDownList ID="ddlView" runat="server"  DataTextField="View_Name" DataValueField="View_ID" AutoPostBack="false" Width="75" /&gt;
          &lt;/td&gt;
          &lt;td class="DataSelectionTableData"&gt;
              &lt;asp:Button ID="btnSubmit" runat="server" Text="Submit" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>CSS File</h2>
  
  <pre><code>div.ajax__calendar_days table tr td {
      padding-right: 0px;
  }
  
  .Calendar .ajax__calendar_container {
      border: 1px solid #E0E0E0;
      background-color: #FAFAFA;
      width: 175px;
  }
  .Calendar .ajax__calendar_header {
      font-family: Tahoma, Calibri, sans-serif;
      font-size: 12px;
      text-align: center;
      color: #9F9F9F;
      font-weight: normal;
      text-shadow: 0px 0px 2px #D3D3D3;
      height: 20px;
  } 
  .Calendar .ajax__calendar_title,
  .Calendar .ajax__calendar_next,
  .Calendar .ajax__calendar_prev {color: #004080;}
  .Calendar .ajax__calendar_body {
      width: 175px;
      height: 150px;
      position: relative;
  }
  .Calendar .ajax__calendar_dayname {
      font-family: Tahoma, Calibri, sans-serif;
      font-size: 10px;
      text-align: center;
      color: #FA9900;
      font-weight: bold;
      text-shadow: 0px 0px 2px #D3D3D3;
      text-align: center !important;
      background-color: #EDEDED;
      border: solid 1px #D3D3D3;
      text-transform: uppercase;
      margin: 1px;
  } 
  .Calendar .ajax__calendar_day {
      font-family: Tahoma, Calibri, sans-serif;
      font-size: 10px;
      text-align: center;
      font-weight: bold;
      text-shadow: 0px 0px 2px #D3D3D3;
      text-align: center !important;
      border: solid 1px #E0E0E0;
      text-transform: uppercase;
      margin: 1px;
      width: 17px !important;
      color: #9F9F9F;
  }
  .Calendar .ajax__calendar_hover .ajax__calendar_day,
  .Calendar .ajax__calendar_hover .ajax__calendar_month,
  .Calendar .ajax__calendar_hover .ajax__calendar_year,
  .Calendar .ajax__calendar_active {
      color: red; 
      font-weight: bold; 
      background-color: #ffffff;
  }
  .Calendar .ajax__calendar_year {
      border: solid 1px #E0E0E0;
      font-family: Tahoma, Calibri, sans-serif;
      font-size: 10px;
      text-align: center;
      font-weight: bold;
      text-shadow: 0px 0px 2px #D3D3D3;
      text-align: center !important;
      vertical-align: middle;
      margin: 1px;
  }
  
  .Calendar .ajax__calendar_month {
      border: solid 1px #E0E0E0;
      font-family: Tahoma, Calibri, sans-serif;
      font-size: 10px;
      text-align: center;
      font-weight: bold;
      text-shadow: 0px 0px 2px #D3D3D3;
      text-align: center !important;
      vertical-align: middle;
      margin: 1px;
  }
  
  .Calendar .ajax__calendar_today {
      font-family: Tahoma, Calibri, sans-serif;
      font-size: 10px;
      text-align: center;
      font-weight: bold;
      text-shadow: 0px 0px 2px #D3D3D3;
      text-align: center !important;
      text-transform: uppercase;
      margin: 1px;
      color: #6B6B6B;
  }
  .Calendar .ajax__calendar_other {
      background-color: #E0E0E0;
      margin: 1px;
      width: 17px;
  }
  .Calendar .ajax__calendar_hover .ajax__calendar_today,
  .Calendar .ajax__calendar_hover .ajax__calendar_title {
  
  }
  .Calendar .ajax__calendar_footer {
      width: 175px;
      border: none;
      height: 20px;
      vertical-align: middle;
      color: #6B6B6B;
  }
  
  img.PopupImg {
      vertical-align: middle;
      padding: 0px;
      margin: 0px;
      border: none;
  }
  </code></pre>
  
  <h2>Output Chrome Inspection</h2>
  
  <pre><code>&lt;div class="ajax__calendar_days" id="calExtenderStart_days" style=
  "position: absolute; left: 0px; top: 139px;"&gt;
      &lt;table border="0" cellpadding="0" cellspacing="0" id=
      "calExtenderStart_daysTable" style="margin: auto;"&gt;
          &lt;thead id="calExtenderStart_daysTableHeader"&gt;
              &lt;tr id="calExtenderStart_daysTableHeaderRow"&gt;
                  &lt;td&gt;
                      &lt;div class="ajax__calendar_dayname"&gt;
                          Su
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;div class="ajax__calendar_dayname"&gt;
                          Mo
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;div class="ajax__calendar_dayname"&gt;
                          Tu
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;div class="ajax__calendar_dayname"&gt;
                          We
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;div class="ajax__calendar_dayname"&gt;
                          Th
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;div class="ajax__calendar_dayname"&gt;
                          Fr
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;div class="ajax__calendar_dayname"&gt;
                          Sa
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody id="calExtenderStart_daysBody"&gt;
              &lt;tr&gt;
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_0_0" title=
                      "Sunday, January 26, 2014"&gt;
                          26
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_0_1" title=
                      "Monday, January 27, 2014"&gt;
                          27
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_0_2" title=
                      "Tuesday, January 28, 2014"&gt;
                          28
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_0_3" title=
                      "Wednesday, January 29, 2014"&gt;
                          29
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_0_4" title=
                      "Thursday, January 30, 2014"&gt;
                          30
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_0_5" title=
                      "Friday, January 31, 2014"&gt;
                          31
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_0_6" title=
                      "Saturday, February 01, 2014"&gt;
                          1
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_1_0" title=
                      "Sunday, February 02, 2014"&gt;
                          2
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_1_1" title=
                      "Monday, February 03, 2014"&gt;
                          3
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_1_2" title=
                      "Tuesday, February 04, 2014"&gt;
                          4
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_1_3" title=
                      "Wednesday, February 05, 2014"&gt;
                          5
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_1_4" title=
                      "Thursday, February 06, 2014"&gt;
                          6
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_1_5" title=
                      "Friday, February 07, 2014"&gt;
                          7
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_1_6" title=
                      "Saturday, February 08, 2014"&gt;
                          8
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_2_0" title=
                      "Sunday, February 09, 2014"&gt;
                          9
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_2_1" title=
                      "Monday, February 10, 2014"&gt;
                          10
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_2_2" title=
                      "Tuesday, February 11, 2014"&gt;
                          11
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_2_3" title=
                      "Wednesday, February 12, 2014"&gt;
                          12
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_2_4" title=
                      "Thursday, February 13, 2014"&gt;
                          13
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_today"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_2_5" title=
                      "Friday, February 14, 2014"&gt;
                          14
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_2_6" title=
                      "Saturday, February 15, 2014"&gt;
                          15
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_3_0" title=
                      "Sunday, February 16, 2014"&gt;
                          16
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_3_1" title=
                      "Monday, February 17, 2014"&gt;
                          17
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_3_2" title=
                      "Tuesday, February 18, 2014"&gt;
                          18
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_3_3" title=
                      "Wednesday, February 19, 2014"&gt;
                          19
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_3_4" title=
                      "Thursday, February 20, 2014"&gt;
                          20
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_3_5" title=
                      "Friday, February 21, 2014"&gt;
                          21
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_3_6" title=
                      "Saturday, February 22, 2014"&gt;
                          22
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_4_0" title=
                      "Sunday, February 23, 2014"&gt;
                          23
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_4_1" title=
                      "Monday, February 24, 2014"&gt;
                          24
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_4_2" title=
                      "Tuesday, February 25, 2014"&gt;
                          25
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_4_3" title=
                      "Wednesday, February 26, 2014"&gt;
                          26
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_4_4" title=
                      "Thursday, February 27, 2014"&gt;
                          27
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class=""&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_4_5" title=
                      "Friday, February 28, 2014"&gt;
                          28
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_4_6" title=
                      "Saturday, March 01, 2014"&gt;
                          1
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_5_0" title=
                      "Sunday, March 02, 2014"&gt;
                          2
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_5_1" title=
                      "Monday, March 03, 2014"&gt;
                          3
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_5_2" title=
                      "Tuesday, March 04, 2014"&gt;
                          4
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_5_3" title=
                      "Wednesday, March 05, 2014"&gt;
                          5
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_5_4" title=
                      "Thursday, March 06, 2014"&gt;
                          6
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_5_5" title=
                      "Friday, March 07, 2014"&gt;
                          7
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td class="ajax__calendar_other"&gt;
                      &lt;div class="ajax__calendar_day" id=
                      "calExtenderStart_day_5_6" title=
                      "Saturday, March 08, 2014"&gt;
                          8
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>