Showing calendar exactly below a textbox

Question

I designed a dropdown calendar but if I click on the Image to show the drop down calendar,I cant see that, below the Textbox. how can I show this calendar exactly below the textbox:

<table width=100%>
  <tr align=center>
    <td align=center>
      <asp:Panel ID="Panel2" runat="server" GroupingText="Suche" >
        <table width=100%>
          <tr align=center>
            <td align=center>
              <asp:Label ID="Label4" runat="server" Text="Von :"></asp:Label>
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
              <img id="Calimg1" src="Images/cal.jpg" onclick="selectdate()" />
              <div id="calblock1" class=calander >
                <asp:Calendar OnSelectionChanged="Calendar1_SelectionChanged"
                              ID="Calendar1" runat="server" BackColor="#FFFFCC" 
                              BorderColor="#FFCC66" BorderWidth="1px"
                              DayNameFormat="Shortest" Font-Names="Verdana"
                              Font-Size="8pt" ForeColor="#663399" Height="200px" 
                              ShowGridLines="True" Width="220px">
                  <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True"
                                  Height="1px" />
                  <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                  <OtherMonthDayStyle ForeColor="#CC9966" />
                  <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                  <SelectorStyle BackColor="#FFCC66" />
                  <TitleStyle BackColor="#990000" Font-Bold="True"
                              Font-Size="9pt" ForeColor="#FFFFCC" />
                  <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                </asp:Calendar>
              </div>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                                          runat="server" 
                                          ControlToValidate="TextBox1"
                                          ErrorMessage="*" ForeColor="Red">
              </asp:RequiredFieldValidator>
            </td>
          </tr>
......

CSS:

.calander
{
    display:none;
    position:absolute
}

and the JavaScript that I used:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Calimg1').click(function () {
            if (isAnyVisible()) return false;
            $('#calblock1').slideToggle("slow");
        });

        $('#Img1').click(function () {
            if (isAnyVisible()) return false;
            $('#Div2').slideToggle("slow");
        });
    });

    function isAnyVisible() {
        if ($('#Calimg1').is(':visible') || $('#Img1').is(':visible')) {
            return false;
        }
        return true;
    }

how do you expect us to run the server side code, just provide the generated html.. — Baz1nga, Jun 21 '12 at 06:42
I see it hier somehow correct http://jsfiddle.net/tYcfQ/ but If I run it in my browser not — Baper, Jun 21 '12 at 06:47
It works in the fiddle because your viewport is so small. `position:absolute` implies... position, yet you give no `top` or `left` -- no position. — Chris Baker, Jun 21 '12 at 06:51

score 4 · Accepted Answer · edited May 23 '17 at 11:58

You've specified that the position is absolute, which is the right track. However, you're missing a few things.

First, the parent of an absolute element should have position:relative. Without that relative parent, when you specify a top and left it will be relative to the entire document. Much easier to work with if the coordinates you're using are relative to the container.

Next, nested tables are horrible. Use divs, eliminate some of those containers. CSS positioning, floats, margins, and padding will accomplish the same result.

Documention

CSS position at MDN - https://developer.mozilla.org/en/CSS/position
A list apart article about CSS positioning - http://www.alistapart.com/articles/css-positioning-101/
Stop using tables for layout @ Stack Overflow - Why not use tables for layout in HTML?

score 0 · Answer 2 · answered May 06 '15 at 13:22

There is a better using native .Net tools if you have 2012 or later. Use any textbox, then go to properties and change the TextMode to DateTimeLocal. That will create a very nice dropdown calendar. Note: If your IE is too old it won't show the calendar, so try debug it on Chrome and Firefox too.

Showing calendar exactly below a textbox

2 Answers2