Home/ Questions/Q 8109313
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T01:22:55+00:00

I designed a dropdown calendar but if I click on the Image to show

  • 0

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;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0