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

HOUSSEM MAHJOUBI 286

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

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2023-03-10T03:16:25.4633333+00:00

Hi @HOUSSEM MAHJOUBI ,

Do you have any other questions about this post?

2 answers

Alan Farias 745

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:

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>

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>

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.

HOUSSEM MAHJOUBI 286

i made the position relative to the button

 <script type="text/javascript">
    function positionPopup() {
        var pop = $find("mpe");
        var ddl = $("#<%= Button8.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>

and for the pop.set_Y(ddlOffset.top); thats good height and

for the pop.set_X(ddlOffset.left + ddlWidth); its become almost not visible may be because

the button8 is at top right of the screen

i tried to modify that line but it return to the center

how i can modify that line?

Alan Farias 745 Reputation points

2023-03-01T12:47:36.3733333+00:00
If the modal popup extender is almost not visible when you position it next to the button, it may be because the button is positioned at the top right of the screen and the popup is positioned to the right of the button. You can try adjusting the X and Y coordinates of the popup to make it more visible. Here is an example of how you can modify the positionPopup() function to adjust the X and Y coordinates:

<script type="text/javascript"> function positionPopup() { var pop = $find("mpe"); var button = $("#<%= Button8.ClientID %>"); if (pop != null && button != null) { var buttonOffset = button.offset(); var buttonHeight = button.outerHeight(); var popWidth = pop.get_PopupControlID().offsetWidth; var popHeight = pop.get_PopupControlID().offsetHeight; // Adjust the X and Y coordinates based on the button position and popup size var x = buttonOffset.left + button.outerWidth(); var y = buttonOffset.top - popHeight; pop.set_X(x); pop.set_Y(y); } } </script>

In this modified function, the X and Y coordinates are adjusted based on the button position and the size of the popup. The X coordinate is set to the right edge of the button, and the Y coordinate is set to the top of the button minus the height of the popup. This should position the popup above and to the right of the button, which may be more visible.

You may need to adjust the X and Y coordinates further based on your specific requirements and CSS styles.

HOUSSEM MAHJOUBI 286

like this it work using the button that show the modalpopup:

 <script type="text/javascript">
    function positionPopup() {
        var pop = $find("mpe");
        var button = $("#<%= Button8.ClientID %>");
 
        if (pop != null && button != null) {
            var buttonOffset = button.offset();
            var buttonHeight = button.outerHeight();
            var popWidth = pop.get_PopupControlID().offsetWidth;
            var popHeight = pop.get_PopupControlID().offsetHeight;
            var scr = screen.width;
            // Adjust the X and Y coordinates based on the button position and popup size
           
            var x = scr-((scr/3)-50);
            var y = buttonOffset.top - popHeight;

            pop.set_X(x);
            pop.set_Y(y);
        }
    }
</script>

after that when i test the dropdownlist it return to the center

  <td class="auto-style164">DEVIS EN COURS : &nbsp;&nbsp;
                             <asp:DropDownList ID="DropDownList5" runat="server" Height="16px" Width="272px" AutoPostBack="True" onchange="$find('mpe').show(); positionPopup();">
                             </asp:DropDownList>
                            
                         </td>

and vb.net code :

  Protected Sub DropDownList5_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList5.SelectedIndexChanged

        Dim str As String = DropDownList5.Text
        Dim strarr() As String
        strarr = str.Split(vbTab)
        Dim server = "192.168.2.200"

        Dim substitution As New SqlConnection("server='" & server & "';database=SUBSTITUTION_SERVER;user=adm;password=Stupremat0@")



        If substitution.State = ConnectionState.Open Then
            substitution.Close()
        End If
        substitution.Open()
        Dim cmd222 As New SqlCommand("SELECT [N_Devis]
     
      ,[Num_Client]
      ,[Article],[Description]
      ,[Qte]
      
  FROM [Devis_Client_Ligne] where n_devis='" & strarr(0) & "'", substitution)
        Dim da222 As New SqlDataAdapter(cmd222)
        Dim tyu As New DataTable
        da222.Fill(tyu)
        Label7.Text = strarr(0)
        Label14.Text = strarr(1)

        substitution.Close()

        GridView13.DataSource = tyu
        GridView13.DataBind()
        Dim ipAdd = Request.ServerVariables("REMOTE_ADDR").ToString
        ' Dim substitution As New SqlConnection("server='" & server & "';database=SUBSTITUTION_SERVER;user=adm;password=Stupremat0@")
        If substitution.State = ConnectionState.Open Then
            substitution.Close()
        End If
        substitution.Open()
        Dim cmd22145 As New SqlCommand("SELECT [Utilisateur]
      ,[IP],[N_Devis],[Num_client],[Client_Divers] FROM [Devis_Client_Entete] where ip='" & ipAdd & "' and N_Devis='" & strarr(0) & "'", substitution)
        Dim da22145 As SqlDataReader = (cmd22145.ExecuteReader)
        da22145.Read()
        If Not da22145.HasRows Then

            Button10.Enabled = False
            Button11.Enabled = False
        Else
            Button10.Enabled = True
            Button11.Enabled = True

        End If

        If substitution.State = ConnectionState.Open Then
            substitution.Close()
        End If
        substitution.Open()
        Dim cmd221456 As New SqlCommand("SELECT [Utilisateur]
      ,[IP],[N_Devis],[Num_client],[Client_Divers],[Client],[M_Fiscal],[Machine] FROM [Devis_Client_Entete] where N_Devis='" & strarr(0) & "'", substitution)
        Dim da221456 As SqlDataReader = (cmd221456.ExecuteReader)
        da221456.Read()
        If da221456.HasRows Then
            If Not IsDBNull(da221456(5)) Then
                TextBox3.Text = da221456(5)
                Label14.Text = da221456(5)
            End If
            If Not IsDBNull(da221456(3)) Then
                TextBox4.Text = da221456(3)

            End If
            If Not IsDBNull(da221456(6)) Then
                TextBox6.Text = da221456(6)
            End If
            If Not IsDBNull(da221456(7)) Then
                TextBox10.Text = da221456(7)
            End If
            If Not IsDBNull(da221456(2)) Then
                Label7.Text = da221456(2)
            End If




            If Not IsDBNull(da221456(3)) Then
                If da221456(3) = "9999" Then

                    TextBox9.Visible = True
                    Label20.Visible = True
                    If Not IsDBNull(da221456(3)) Then

                        TextBox9.Text = da221456(4)
                        TextBox9.Attributes.Add("style", "display:normal;")
                    End If
                Else
                    TextBox9.Visible = False
                    Label20.Visible = False
                End If

            End If
        End If
        substitution.Close()

        mpe.Show()
    End Sub

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

please help

Lan Huang-MSFT 25,556 Microsoft Vendor

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.

HOUSSEM MAHJOUBI 286

same thing didn't work

and i tried everything and no result please help

lets try using button inside the modalpopup :

 </style>
   <script type="text/javascript">
    function positionPopup() {
        var pop = $find("mpe");
        var button = $("#<%= Button8.ClientID %>");
 
        if (pop != null && button != null) {
            var buttonOffset = button.offset();
            var buttonHeight = button.outerHeight();
            var popWidth = pop.get_PopupControlID().offsetWidth;
            var popHeight = pop.get_PopupControlID().offsetHeight;
            var scr = screen.width;
            // Adjust the X and Y coordinates based on the button position and popup size
           
            var x = scr-((scr/3)-50);
            var y = buttonOffset.top - popHeight;

            pop.set_X(x);
            pop.set_Y(y);
        }
       }
       function change(){
          var text = $("#<%=DropDownList5.ClientID%> :selected").index();
           var pop = $find("mpe");              
          
            if (text == "1") {
                if (pop != null) {
                  
                      var scr = screen.width;
            // Adjust the X and Y coordinates based on the button position and popup size
           
            var x = scr-((scr/3)-50);
           
                    pop.set_X(x);
                    pop.set_Y(500);
                     
                }
            }        
        }
</script>
    <script type="text/javascript">
        function setPopup() {
            var pop = $find("mpe");
            var scr = screen.width;
            if (pop != null) {
                
                pop.set_X(scr * 0.7);
                pop.set_Y(scr * 0.1);             
            }
        }
    </script>

 Protected Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click
        mpe.Show()
    End Sub

<asp:Button ID="Button15" runat="server" Text="Button" OnClientClick="$find('mpe').show(); positionPopup();"/>

Lan Huang-MSFT 25,556 Microsoft Vendor

Hi @HOUSSEM MAHJOUBI ,

same thing didn't work

The code you provided doesn't seem to use the solution I provided.

The front end has already used the client's OnClientClick event to set the coordinates, and the back end does not need to be set. Just change the coordinates according to the DropDownList's onchange() method. No need to add new buttons.

I wrote an example based on your newly provided code.

<script src="Scripts/jquery-3.4.1.min.js"></script>
     <script type="text/javascript">
         function positionPopup() {
             var pop = $find("mpe");
             var button = $("#<%= Button8.ClientID %>");
             if (pop != null && button != null) {
                 var buttonOffset = button.offset();          
                 var popHeight = pop.get_PopupControlID().offsetHeight;
                 var scr = screen.width;              
                 var x = scr - ((scr / 3) - 50);
                 var y = buttonOffset.top - popHeight;
                 pop.set_X(x);
                 pop.set_Y(y);
             }
         }
         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="$find('mpe').show(); positionPopup();" />
    <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>

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2023-03-10T09:07:36.2233333+00:00

Hi @HOUSSEM MAHJOUBI ,

Do you have any other questions about this post?