I've got an issue with the ModalPopupExtender when rendered in a mobile device browser only. My app requires that a user pick a timeslot by tapp/drag, when they stop dragging a dialog appears to confirm their time selection. The user then clicks ok to register a time or cancel. The problem is that when using this page in mobile browser, the user scrolls down out of view of the header, selects a time, dialog opens up (background blocks) but stays up in the header (centered) thus requiring the user to scroll up to confirm or cancel. I can confirm my scripts function when executing in MobiOne emulator & all browsers not in mobile screen size. The dialog is locked at the top so I'm sure it's my css. Let me explain my setup...
I use the WURFL library for device detection so each device has a .css section like this..
@media screen and (max-width: 320px) {
/* styles: iPhone3 portrait, */
.rPanel
{
background-color: red;
border: 1px solid black;
padding:4px 4px 4px 4px;
}
}
@media screen and (max-width: 480px) {
/* styles: iPhone3 landscape, android nexus portrait*/
.rPanel
{
background-color: green;
border: 1px solid black;
padding:4px 4px 4px 4px;
}
}
Here is my panel and ModelPopupExtender. rPanel is the div=dialog; modalExt is the related extender...
<asp:UpdatePanel ID="updatePanel" class="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div runat="server" id="ruleViolationsMsg" class="rulePanel">
<asp:Label ID="ErrorHeader" runat="server" CssClass="ErrorHeader"></asp:Label>
<br />
<asp:PlaceHolder ID="errorMsgControls" runat="server" />
</div>
<asp:Button ID="ruleModalBtn" runat="server" Style="display: none;" />
<asp:Button ID="ruleModalCloseBtn" runat="server" Text="" Style="display: none;" />
<div id="rPanel" class="rPanel" runat="server" style="display: none;">
<table>
<tr>
<th id="tableTh" runat="server" colspan="2" class="tableTh">
Confirm Reservation
</th>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="errorMsg" runat="server" Visible="false" />
</td>
</tr>
<tr>
<td>
<label for="selectedResource" class="label">
Resource:
</label>
</td>
<td>
<asp:Label ID="selectedResource" runat="server" />
</td>
</tr>
<tr>
<td>
<label for="selectedDate" class="label">
Date:
</label>
</td>
<td>
<asp:Label ID="selectedDate" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<label for="startTime" class="label">
Start Time:
</label>
</td>
<td>
<asp:Label ID="startTime" runat="server" />
</td>
</tr>
<tr>
<td>
<label for="endTime" class="label">
End Time:
</label>
</td>
<td>
<asp:Label ID="endTime" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="cancel" runat="server" Text="Cancel" CssClass="submit" OnClick="cancel_Click" />
<asp:Button ID="reserve" runat="server" Text="Reserve" CssClass="submit" OnClick="reserve_Click" UseSubmitBehavior="true" />
</td>
</tr>
</table>
</div>
<asp:Button ID="progressBtn" runat="server" OnClientClick="progressBtn();" Style="display: none;" />
<asp:Button ID="progressCloseBtn" runat="server" Text="" CssClass="progressBtn" Style="display: none;" />
<div id="progressPanel" class="progressPanel" style="display: none">
<label class="progressText">
Please wait...</label>
<div id="progress" class="progress">
</div>
<div id="progressDiag" class="progressDialog">
</div>
</div>
<asp:HiddenField ID="reservationStatus" Value="0" runat="server" />
<asp:ModalPopupExtender ID="progressModal" runat="server" TargetControlID="progressBtn"
PopupControlID="progressPanel" BackgroundCssClass="modalPopup" CancelControlID="progressCloseBtn"
BehaviorID="progressModal" >
</asp:ModalPopupExtender>
<asp:GridView ID="reservegrid" runat="server" CssClass="reserveGrid" AutoGenerateColumns="true"
OnRowDataBound="reservegrid_RowDataBound" HeaderStyle-CssClass="gridHeader" HorizontalAlign="center">
</asp:GridView>
<asp:HiddenField ID="sRes" runat="server" EnableViewState="true" />
<asp:ModalPopupExtender ID="modalExt" runat="server" TargetControlID="dummyModal"
BackgroundCssClass="modalPopup" CancelControlID="dummyModal" PopupControlID="rPanel"
BehaviorID="md" />
<asp:Button ID="dummyModal" runat="server" Text="" Style="display: none;" CausesValidation="false" />
<asp:HiddenField ID="rSelected" runat="server" />
<asp:HiddenField ID="rStart" runat="server" />
<asp:HiddenField ID="rEnd" runat="server" />
<asp:HiddenField ID="rLastSlot" runat="server" Value="0" />
<asp:HiddenField ID="rCompleted" runat="server" Value="0" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="reserve" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="cancel" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ruleModalBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
After the user selects a timeslot and the values are loaded, my jquery calls launchModal()..
$('input[id$="rCompleted"]').val("0");
launchModal();
launchModal shows my 'md' (behaviorID in extender) dialog with values...
launchModal = function () {
$find('md').show();
};
I've got a "Sticky" dialog extender that I have yet to deploy because AJaxControlKit ModalPopupExtender anchors, like I said, its just not working for me on mobile. Do you recommend using a jquery UI Dialog "Sticky" extender to make this work? Will it fix my anchor problem? What is the "best" way to deploy this extender? Do i remove the ModalPopupExtender altogether?
If not, how do you recommend I anchor the dialog at the click position, but yet allow the user to scroll with the dialog always being visible? THanks for your help, Chris
