ModalPopUp cannot be dragged and dropped on IE

Jonathan Shen – MSFT:

Hi Profnachos,

PopupDragHandleControlID should be PanelDrag. Also you should do some changes no the CSS issue. Here is the sample.

Ooops, my bad. I fixed that. But it still snaps right back after dragging it once or twice.

What changes do I need to do to the CSS? It frustrates me because it works in Firefox, so what IE specific things am I missing?

Hi Profnachos,

profnachos:

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
BackgroundCssClass="modalBackground" TargetControlID="hiddenTargetControlForModalPopup"
PopupDragHandleControlID="programmaticPopupDragHandle" Drag="true" />
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />

PopupDragHandleControlID should be PanelDrag. Also you should do some changes no the CSS issue. Here is the sample.

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <br /><div> <div style="height: 300px; width: 400px; float: left; padding: 5px;"> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none"> <asp:UpdatePanel ID="updatePanel" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:Panel runat="Server" ID="PanelDrag" Style="cursor: move; background-color: #DDDDDD; border: solid 1px Gray; color: Black; text-align: center;width:300px"> ModalPopup shown and hidden in code </asp:Panel> <div align="center" style="width:300px"> <asp:Button ID="OkButton" runat="server" Text="OK"/> <asp:Button ID="CancelButtonReally" runat="server" Text="Cancel" /> <asp:Button ID="Anybutton" runat="server" Text="Anybotton"/> <asp:DropDownList ID="ddlTest" runat="server" AutoPostBack="true"> <asp:ListItem Text="HOwody"></asp:ListItem> <asp:ListItem Text="Doody"></asp:ListItem> </asp:DropDownList> </div> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <br /><ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" BackgroundCssClass="modalBackground" TargetControlID="hiddenTargetControlForModalPopup" PopupDragHandleControlID="PanelDrag" Drag="true" /> <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Text="Click" /> </div> </div>

I hope this help.

Best regards,

Jonathan

Thanks Jonathan. I should have paid more attention to the parts of the code you posted in bold.

While the style in the div tag you enlarges the area where the popup can be dragged and dropped, I am still stomped by thesample website code.

There, the css class for the div tag is "demoarea" which is the following from StyleSheet.css

.demoarea {padding:20px;background:#FFF url(images/demotop.png) no-repeat left top;}

I am scratching my head becuse it only specifies the padding, but none of what you have (height, width, padding, etc.), but yet you can drag the modalPoPup pretty much anywhere in IE and of course Firefox. So what am I missing? Perhaps the problem is my lack of CSS literacy, so please be patient with me.