Solved

Modal Popup position

Posted on 2010-09-17
8
739 Views
Last Modified: 2012-05-10
Dear experts,

I am using a modal popup. Before I added a drag handle, the popup window was positioned on the screen correctly, though it could not be moved around the screen. But when I added a handle panel and set PopupDragHandleControlID to its ID, the upper edge of the popup became in the middle of the screen, so that its bottom edge is not seen. Thus the user must every time drag the popup up, which annoys them. Could you tell me please if this can be fixed?
0
Comment
Question by:tantormedia
  • 4
  • 3
8 Comments
 
LVL 9

Expert Comment

by:abhinayp86
ID: 33701473
u can change the position using setting the attributes X=
and Y =
0
 

Author Comment

by:tantormedia
ID: 33701544
I tried to change the Y attribute of the Modal Popup Extender to 0, but it didn't help.
0
 
LVL 9

Expert Comment

by:abhinayp86
ID: 33716191
Can u put the aspx here?
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

Author Comment

by:tantormedia
ID: 33716343
I was debugging in FireFox and noticed that the ModalPopup extender generates a div around my popup panel with Position:absolute. When I change it to fixed and make Y=5, the popup goes to the right place. But I don't know how to set the position in the code, because the extender generates the div and not my code.
<asp:Panel ID="pnlLicensingDetail" runat="server" CssClass="modalPopup" DefaultButton="btnLicensingDetailSubmit"
            Style="display:none;" Width="700px" >
            <asp:Panel runat="Server" ID="dragLicensingDetail" CssClass="drag" HorizontalAlign="Center" />

            <div align="center" style="vertical-align:middle; height:600px; overflow:auto">
                <br />
                <asp:ValidationSummary ID="LicensingDetailValidationSummary" runat="server" ValidationGroup="licensing_validation" 
                    BorderStyle="Solid" HeaderText="The following error(s) occured:" />   
                    
                <asp:Button ID="btnShowLicensingDetailPopup" runat="server" style="display:none" />            
                    
                <ajaxToolkit:ModalPopupExtender ID="LicensingDetailModalPopupExtender" 
                    runat="server" TargetControlID="btnShowLicensingDetailPopup" PopupDragHandleControlID="dragLicensingDetail"
                    PopupControlID="pnlLicensingDetail" BackgroundCssClass="modalBackground" Y="5" 
                    DropShadow="True" CancelControlID="btnLicensingDetailCancel" DynamicServicePath="" 
                    Enabled="True" BehaviorID="ShowLicensingDetailErrors" ></ajaxToolkit:ModalPopupExtender>                   
  ...

Open in new window

0
 
LVL 9

Expert Comment

by:abhinayp86
ID: 33717121
I am actually trying to replicate ur error/problem, but i cant get it to.

I use many modalpopups throughout, but never got any troublr

Can u try this n chk if u r getting the problem is repeatin


<asp:Panel ID="pnlManual" runat="server" CssClass="ConfirmClr" Style="height: auto;
        width: auto" ScrollBars="None">
        <asp:Panel runat="server" ID="pnlDrag">
            <asp:Literal runat="server" ID="lll"></asp:Literal>
            <br />
            <asp:Literal runat="server" ID="Literal1"></asp:Literal>
            <br />
        </asp:Panel>
        <table>
            <tr>
                <td colspan="2">
                    <label class="InstructionLabels">
                        <b>Enter Store Numbers:</b> (Seperated by commas or space or carriage return)</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:UpdatePanel runat="server" ID="upManualTxt">
                        <ContentTemplate>
                            <asp:TextBox runat="server" TextMode="MultiLine" Width="500px" Style="overflow: auto;"
                                Height="180px" ID="txtManual"></asp:TextBox>
                            
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <asp:Button ID="btnManualSave" CssClass="btns_White_Blue" runat="server" OnClick="btnManualSave_Click"
                        Width="90px" Text="Done" />
                </td>
                <td align="center">
                    <asp:Button ID="btnManualCancel" CssClass="btns_White_Blue" runat="server" Width="90px"
                        Text="Close" />
                </td>
            </tr>
        </table>
    </asp:Panel>
    <ajaxtool:ModalPopupExtender runat="server" ID="MPEManual" TargetControlID="btnManual"
        CancelControlID="btnManualCancel" PopupControlID="pnlManual" PopupDragHandleControlID="pnlDrag"
        BackgroundCssClass="Fadedbackground">
    </ajaxtool:ModalPopupExtender>

Open in new window

0
 
LVL 9

Accepted Solution

by:
abhinayp86 earned 500 total points
ID: 33717137
Also i c that u r using it for showing the validation summary.

Here is mine which shows val Summary.
<asp:Panel runat="server" ID="pnlSummary" CssClass="ConfirmClr">
                <asp:Panel runat="server" ID="pnlDrag">
                    <table width="400px">
                        <tr>
                            <td>
                                <label>
                                    [-</label>
                            </td>
                            <td>
                                Drag me
                            </td>
                            <td><label>
                                -]</label>
                            </td>
                        </tr>
                    </table>
                </asp:Panel>
                <table>
                    <tr>
                        <td>
                            <asp:ValidationSummary runat="server" ID="valSummary" Font-Names="Verdana" Font-Bold="true"
                                Font-Size="8pt" ForeColor="#045d98" DisplayMode="BulletList" ShowSummary="true"
                                ValidationGroup="simple" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <br />
                            <asp:Button ID="okBtn" runat="server" Text="OK" Width="120px" CssClass="btns_White_Blue" /><br />
                            <br />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <ajaxtool:ModalPopupExtender runat="server" ID="mpeSummary" TargetControlID="dummy" PopupDragHandleControlID="pnlDrag"
                DropShadow="true" PopupControlID="pnlSummary" CancelControlID="okBtn" BackgroundCssClass="Fadedbackground">
            </ajaxtool:ModalPopupExtender>
            <asp:LinkButton runat="server" ID="dummy" Style="display: none" />

Open in new window

0
 

Author Comment

by:tantormedia
ID: 33753127
abhinayp86,

Your modal mopup doesn't work correctly, probably because you didn't give me your cssclasses.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question