locked
calendar opens behind document -need it over document RRS feed

  • Question

  • User1652530521 posted

    Hi

    Need help please. I have an asp.net calendarextender on my page. When I open it it is hidden behind a document in the page as in the image attached (link).

    How can i display it  over  the document?

     http://www.filedropper.com/table_1

    Thanks

    Monday, March 21, 2016 1:25 PM

Answers

  • User2103319870 posted

    When I open it it is hidden behind a document in the page as in the image attached (link).

    Try applying a higher z-index value to calendar container like below

     <style type="text/css">
                .ajax__calendar_container {
                    z-index: 99999 !important;
                }
            </style>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 21, 2016 1:43 PM
  • User61956409 posted

    Hi whisky,

    I replace “ValidateTextBox” with TextBox, and I find that calendar is in front of other elements.

    Besides, as I mentioned, please use F12 developer tools to check if other element with a stack order that is greater than calendar.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 25, 2016 7:16 AM

All replies

  • User2103319870 posted

    When I open it it is hidden behind a document in the page as in the image attached (link).

    Try applying a higher z-index value to calendar container like below

     <style type="text/css">
                .ajax__calendar_container {
                    z-index: 99999 !important;
                }
            </style>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 21, 2016 1:43 PM
  • User-881666849 posted

    Hi,

    If you could have used master page in your application the styles that you applied for those controls they are overlapping the controlextender control in your page.

    what you have to do is :

    master page

    -------------

    <div style=";z-index:-10;">

    <asp:contentplaceholder ></asp:contentplaceholder>

    <div>

    child 

    -----------

    <div style=";z-index:10;">

      calender extender control 

    </div>

    now your control will be visible to you.

    All the best.

    Tuesday, March 22, 2016 7:20 AM
  • User61956409 posted

    Hi whisky,

    whisky

    I have an asp.net calendarextender on my page. When I open it it is hidden behind a document in the page

    As we know, an element with greater stack order is always in front of an element with a lower stack order, you could use F12 developer tools to check the z-index property of calendar and other elements, then you could specify the greatest stack order for calendar. For more information about CSS z-index property, you could refer to this link.

    http://www.w3schools.com/cssref/pr_pos_z-index.asp

    Best Regards,

    Fei Han

    Tuesday, March 22, 2016 7:32 AM
  • User1652530521 posted

    Thanks. Still not working.

    Here is my html

      <div id="divMain" dir="rtl">
                <table cellpadding="0" cellspacing="0"
                    style="border-style: solid; border-width: 1px; width: 100%; border-collapse: collapse;">
                    <tr>
                        <td class="DocumentHeader">
                            <asp:Label runat="server" ID="lblDocumentName"></asp:Label></td>
                    </tr>
                    <tr>
                        <td>
                            <table style="border: 1px solid #000000; width: 100%; table-layout: fixed; text-align: center;"
                                border="0">
                                <tr class="DocumentSecHeader2">
                                    <td class="DocumentSecHeader">SOURCE </td>
                                    <td class="DocumentSecHeader">ORIGINAL</td>
                                </tr>
                                <tr id="trFormPreview" style="height: 100%;">
                                    <td valign="top" class="DocumentContent">
                                        <asp:Literal runat="server" ID="ltrPDFCopy" Text="&nbsp;"></asp:Literal>
                                    </td>
                                    <td valign="top" class="DocumentContent">
                                        <div class="divFrame"  >
                                            <asp:Literal runat="server" ID="ltrPDFSource" ></asp:Literal>
                                            
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table style="width: 100%;">
                                <tr>
                                    <td>UPLOAD FILE:<asp:FileUpload ID="FileUpload1" runat="server" Width="500px" />&nbsp;<asp:Button
                                        ID="cmdUploadFile" runat="server" CausesValidation="false" CssClass="btnStyle80" Text="UPLOAD FILDE" />
    
                                    </td>
                                    <td align="right">
                                        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtSignDate"  CssClass="imgCalender"
                                            FirstDayOfWeek="Sunday" Format="dd/MM/yyyy" PopupButtonID="imgCalander1" PopupPosition="BottomRight">
                                        </asp:CalendarExtender>
                                        <asp:Label ID="Label1" runat="server" Text="SIGNATURE DATE"></asp:Label>
    
                                        <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" AutoComplete="False"
                                            ClearMaskOnLostFocus="true" CultureName="he-IL" Mask="99/99/9999" MaskType="Date"
                                            TargetControlID="txtSignDate" PromptCharacter=" ">
                                        </asp:MaskedEditExtender>
                                        <cc1:ValidateTextBox ID="txtSignDate" runat="server" Width="68px"  FunctionName="IsDateValid"
                                            ErrorProvider="Text" IsRequired="true" Required_ErrorMessage="*" ValidationGroup="vgrp"
                                            MaskEdit="" TextDirection="ltr" MaxLength="8"></cc1:ValidateTextBox>
                                        <asp:Image ID="imgCalander1" runat="server" ImageUrl="~/images/icons/Calander.png" /> 
                                            
                                    </td>
                                    <td align="left">
                                        <asp:UpdatePanel runat="server" ID="UpdatePanelCommands" UpdateMode="Conditional">
                                            <ContentTemplate>
                                                <span style="display: inline;">
                                                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
                                                        <ProgressTemplate>
                                                            <span>אנא המתן...</span>
                                                        </ProgressTemplate>
                                                    </asp:UpdateProgress>
                                                </span>
                                                <asp:Button ID="cmdSetFormForAttach" OnClientClick="return cmdSetFormForAttach_onclick(this);" runat="server" CssClass="btnStyle80" Text="אשר וסגור" ValidationGroup="vgrp" />
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>

    Tuesday, March 22, 2016 9:37 AM
  • User61956409 posted

    Hi whisky,

    I replace “ValidateTextBox” with TextBox, and I find that calendar is in front of other elements.

    Besides, as I mentioned, please use F12 developer tools to check if other element with a stack order that is greater than calendar.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 25, 2016 7:16 AM