0

I have a jquery date picker within a modal popup. I have set a z-index of 999999999 for it to ensure is appears on top of the modal window. However, for one user the date picker appears behind the modal window. I have tried clearing the cache and restarting the machine with no luck. It works for all other users as far as I know. Any ideas on how to solve this?

Thanks for the help.

Here is some code: Modal popup

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
        PopupControlID="pnlTimedActivityAddUpdate"
        TargetControlID="btnDummy"
        CancelControlID="lbCancel"
        BackgroundCssClass="modalBackground" />

Panel within popup

<asp:Panel ID="pnlTimedActivityAddUpdate" runat="server" CssClass="modalPopupContainer">
        <asp:Panel ID="Panel2" runat="server" CssClass="modalPopupBackground"> 
            <asp:Panel ID="Panel3" runat="server" CssClass="innerPopupPanel">
                <div class="right">
                    <asp:LinkButton ID="lbCancel" runat="server" Text="Close" CssClass="cancel" /> 
                </div>
                <div>
                    <h2><asp:Label ID="lblPopupHeader" runat="server" Text="" /></h2>
                </div>
                <center>
                    <asp:HiddenField ID="hdnTimedActivityID" runat="server" />
                    <table>
                        <tr>
                            <td align="right">Name:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtName" runat="server" Width="200px" />
                                <asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ErrorMessage="* Required" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Category:&nbsp;</td>
                            <td align="left">
                                <asp:DropDownList ID="ddlCategory" runat="server" />
                                <asp:RequiredFieldValidator ID="rfvCategory" runat="server" ControlToValidate="ddlCategory" ErrorMessage="* Required" />
                            </td>                        
                        </tr>
                        <tr>
                            <td align="right" valign="top"><br /></td>
                            <td align="left" valign="top">
                                <asp:CheckBox ID="chkUseAnticipatedTime" runat="server" Text="Use Anticipated Time" />
                                <div id="divAnticipatedTime" style="display:none">
                                    Minutes:&nbsp;<asp:TextBox ID="txtAnticipatedMinutes" runat="server" Width="25px" CssClass="right" Text="0" />&nbsp;&nbsp;&nbsp;&nbsp;
                                    Seconds:&nbsp;<asp:TextBox ID="txtAnticipatedSeconds" runat="server" Width="20px" CssClass="right" Text="0" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Require:&nbsp;</td>
                            <td align="left">
                                <asp:CheckBox ID="chkRequireVolume" runat="server" Text="Volume" />&nbsp;&nbsp;
                                <asp:CheckBox ID="chkRequireMinutes" runat="server" Text="Minutes" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Active Dates:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtStartDate" runat="server" width="70px" />&nbsp;to&nbsp;<asp:TextBox ID="txtEndDate" runat="server" width="70px" />
                                <%--<asp:TextBox ID="txtStartDate" CssClass="ineeddatepopup ineeddatemaxminvalidation" runat="server" width="70px" />&nbsp;to&nbsp;<asp:TextBox ID="txtEndDate" runat="server" width="70px" />--%>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Sort Order:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtSortOrder" runat="server" Width="25px" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right"><br /></td>
                            <td align="left">
                                <asp:CheckBox ID="chkActive" runat="server" Text="Active" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" valign="top">Description:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtDescription" runat="server" MaxLength="1000" TextMode="MultiLine" Columns="60" Rows="5" />        
                            </td>
                        </tr>
                    </table>
                    <br />
                    <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />&nbsp;&nbsp;
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" onclick="btnCancel_Click" CausesValidation="false" />
                    <br />
                </center>
            </asp:Panel>
        </asp:Panel>
    </asp:Panel>

Attach a calendar

// Attach calendars to start/end date pickers
        $("[id$=txtStartDate]").datepicker({
            minDate: new Date(2014, 1 - 1, 1),
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true
        });

css for datepicker

.ui-datepicker {
    font-size: 85%;
    border: 2px solid maroon !important;
    z-index: 9999999999 !important;
} 

An example of a working calendar is below. When the user in question clicks into the date field, the calendar shows behind the modal popup. This is the only user that has the issue. Working datepicker

I have looked at other solutions in this forum. The questions I can't answer is why it works for everyone else but this one user. Machines, browsers, OS's are the same for everyone.

Steve
  • 1
  • 1
  • 2
    You should provide a code example or a link to an example of the working code, so that we can see exactly what's happening. Also, an image of what happens and what should happen would be useful. – Mihail Minkov Feb 14 '20 at 19:56
  • 1
    Does this answer your question? [jQuery datapicker appearing behind twitter bootstrap modal](https://stackoverflow.com/questions/24626526/jquery-datapicker-appearing-behind-twitter-bootstrap-modal) – Bryan Dellinger Feb 14 '20 at 20:18
  • I updated the post with code. – Steve Feb 18 '20 at 20:25

0 Answers0