ModalPopup with scrollbars?

Article
2007-09-25

Question

_{Tuesday, September 25, 2007 10:19 PM}

I have a modalpopup that works great but it has a gridview inside it which may end up expanding beyond the current screensize heighth-wise. Is there a way to enable or allow scrolling with the modal popup? Currently my modalpopup just keeps expanding heighth wise and ends up expanding off the screen and I can't scroll to the content that is expanded off the screen.

any ideas?

All replies (2)

_{Friday, September 28, 2007 3:23 AM ✅Answered}

Hi Phaedohd,

When a Panel renders to the client , it is a div. So you can change its height and width , also we can add scroll bar. Here is the sample.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script><asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="50px" Width="235px" style="display:none;overflow:auto;" DefaultButton="Button4">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style>
        .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
        }

        .modalPopup {
        background-color:#FFD9D5;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button2" runat="server" Text="Button" Enabled="false" style="display:none"/>
                    <br><br><br><br>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <%=DateTime.Now.ToString() %>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Button ID="Button1" runat="server" Text="Cancel" />
            <asp:Button ID="Button4" runat="server" Text="Button" />
        </asp:Panel>

        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button2" PopupControlID="Panel1" CancelControlID="Button1" DropShadow="true" BackgroundCssClass="modalBackground">
        </ajaxToolkit:ModalPopupExtender>
        <input id="Button3" type="button" value="Click Me" onclick="showModalPopup()"/>
        <script type="text/javascript" language="javascript">
            function showModalPopup(){
                __doPostBack('<%=UpdatePanel1.UniqueID%>','');
                $find("<%= this.ModalPopupExtender1.ClientID %>").show();
            }
        </script>
    </form>
</body>
</html>

You can also use Javascript to do some changes(change its height , width and css style ect.). For example: $get("Panel1.ClientID").style.display ="" will make the Panel shown on the screen.

I hope this help.

Best regards,

Joanthan

_{Wednesday, September 26, 2007 5:52 AM}

I quickly tested and this works if you can apply it to your solution:

Put an iframe inside the modalpopup panel. Put your contents inside that iframe. Set Style="overflow:auto;" on the iframe...

--> Modal popup with scrollbars...

Share via

ModalPopup with scrollbars?

Question

All replies (2)

Additional resources