how to set a position of modal popup extender with dropdownlist at any screen size ?

HOUSSEM MAHJOUBI 286 Reputation points
2023-03-01T07:27:20.85+00:00

Hi members

i have a modalpopupextender that should be at the right of the screen i used x and y property and sometime in smaller screen it get not visible,i used a javascript to set the position and with button that outside the modalpopup it work fine

if the button is inside the modalpopup or dropdownlist it return to the center

this is my try:

  <script type="text/javascript">
    function setPopup() {
        var pop = $find("mpe");
        var scr = screen.width;
 
        if (pop != null) {
            $find("mpe").hide();
            pop.set_X(scr * 0.7);
            pop.set_Y(scr * 0.1);
            $find("mpe").show();
        }
    }
</script>

and for the button outside the modalpopup and work fine:

                      <asp:Button ID="Button8" runat="server" Height="34px" Width="48px" Style="background-image:url('../Images/png2.ico'); background-position: center; background-repeat:no-repeat; background-size:contain;"  OnClientClick="setPopup()"/>

and for the button inside the modalpopup :

<asp:Button ID="Button9" runat="server" Text="Creation" OnClientClick="setPopup();" />

and for the dropdownlist :

<asp:DropDownList ID="DropDownList5" runat="server" Height="16px" Width="272px" AutoPostBack="True" onchange="setPopup();" >
                             </asp:DropDownList>

all the inside the modalpopup didn't work

and for the code in vb.net:

mpe.show

please help

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,247 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
863 questions
VB
VB
An object-oriented programming language developed by Microsoft that is implemented on the .NET Framework. Previously known as Visual Basic .NET.
2,566 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Alan Farias 745 Reputation points
    2023-03-01T09:51:45.3966667+00:00

    It looks like you are trying to position the modal popup extender based on the screen size, but that may not work well on all devices or screen resolutions. Instead, you could try positioning the popup relative to a parent element, such as the button or dropdownlist that triggers it.

    Here is an example of how you could position the modal popup extender next to a dropdownlist, using jQuery:

    1. Add the jQuery library to your page, if it is not already included:
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    1. Add an onclick event to the dropdownlist, to show the modal popup extender and position it next to the dropdownlist:
    <asp:DropDownList ID="DropDownList5" runat="server" Height="16px" Width="272px"
        AutoPostBack="True" onchange="$find('mpe').show(); positionPopup();">
    </asp:DropDownList>
    
    1. Define a positionPopup() function in JavaScript, to position the popup relative to the dropdownlist:
    <script type="text/javascript">
        function positionPopup() {
            var pop = $find("mpe");
            var ddl = $("#<%= DropDownList5.ClientID %>");
     
            if (pop != null && ddl != null) {
                var ddlOffset = ddl.offset();
                var ddlWidth = ddl.outerWidth();
                var popWidth = pop.get_PopupControlID().offsetWidth;
     
                pop.set_X(ddlOffset.left + ddlWidth);
                pop.set_Y(ddlOffset.top);
            }
        }
    </script>
    

    This function gets the position and width of the dropdownlist, and positions the popup next to it by setting the X and Y properties of the modal popup extender.

    Note that you may need to adjust the positioning and sizing of the popup based on your specific requirements and CSS styles.

    I hope this helps!


    Please, if this answer is helpful, click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please let me know.


  2. Lan Huang-MSFT 25,471 Reputation points Microsoft Vendor
    2023-03-02T02:59:39.8433333+00:00

    Hi @HOUSSEM MAHJOUBI ,

    all the inside the modalpopup didn't work

    You want to implement DropDownList to work in modalpopup, you need to define different onchange() method.

     function change(){
              var text = $("#<%=DropDownList5.ClientID%> :selected").text();
                var pop = $find("mpe");               
                if (text == "move") {
                    if (pop != null) {
                        pop.set_X(-1);
                        pop.set_Y(-1);
                    }
                }        
            }
    

    For more details, you can check the following example.

     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager> 
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            function setPopup() {         
                var pop = $find("mpe");              
                var scrX = screen.width;
                var scrY = screen.height
                if (pop != null) {
                    pop.set_X(scrX*0.7);
                    pop.set_Y(scrY*0.4);
                }           
            } 
          function change(){
              var text = $("#<%=DropDownList5.ClientID%> :selected").text();
                var pop = $find("mpe");               
                if (text == "move") {
                    if (pop != null) {
                        pop.set_X(-1);
                        pop.set_Y(-1);
                    }
                }        
            }
        </script>
        <asp:Button ID="Button8" runat="server" Height="34px" Width="48px" OnClientClick="setPopup()" />
        <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
            TargetControlID="Button8" PopupControlID="ModalPanel2" 
            OkControlID="Button6" BackgroundCssClass="modalBackground2" ClientIDMode="Static" />
        <asp:Panel ID="ModalPanel2" runat="server" BackColor="White" BorderColor="#000099"  BorderStyle="Groove" CssClass="auto-style158" BorderWidth="2px">
            <asp:Panel ID="Panel10" runat="server" ScrollBars="Vertical" Width="493px" Height="346px"></asp:Panel>
            <asp:Button ID="Button6" runat="server" Height="25px" Text="Fermer" Width="107px" /><br />
             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList5" runat="server" AutoPostBack="True" onchange="change()">
                        <asp:ListItem Text="Please Select"></asp:ListItem>
                        <asp:ListItem Text="move"></asp:ListItem>
                    </asp:DropDownList>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
    

    i think when i call mpe.show in vb code that return the modalpopup to the center if i delete it the modalpopup didn't show up

    From the code you provided I don't seem to see that you are using the SelectedIndexChanged method in the DropDownList: OnSelectedIndexChanged = "DropDownList5_SelectedIndexChanged".

    There may be a reason for this.

    <asp:DropDownList ID="DropDownList5" runat="server" Height="16px" Width="272px" AutoPostBack="True" OnSelectedIndexChanged = "DropDownList5_SelectedIndexChanged"  ></asp:DropDownList>
    

    Best regards,

    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.