Position the Dialog box to center of page on scrolling in ASP.NET Dialog?

Description

 This article explains on how to position our ASP.NET Web Forms Dialog page box to center of page on scrolling.

Solution

Consider a web page with large content to be scrolled, a dialog appears on the visible area at the moment which gets hidden on scrolling the content. That is the dialog position will remain same as when it is opened so that it can’t be viewed in visible area on scrolling. To resolve this behavior and make the dialog to be viewed on the screen even on scrolling, set the dialog control wrapper CSS position as fixed and mention the top value. This will make the dialog to be shown in center of screen on scrolling the content of the web page. Refer the following code sample.

ASPX 

 
<ej:Dialog ID="detailcol" Title="Details" runat="server" Width="530" ShowOnInit="false">
    <DialogContent>
        My dialog content here
    </DialogContent>
</ej:Dialog>
 
<ej:Button runat="server" ID="Button1" Text="Details" ClientSideOnClick="dialogOpen"></ej:Button>
 
<script type="text/javascript">
function dialogOpen(args) {
       $("#<%=detailcol.ClientID%>").ejDialog(”open”);
    }
</script>
<style type="text/css">
@* get the wrapper div of dialog control by appending '_wrapper' to its ID*@
        #<%=detailcol.ClientID%>_wrapper {
            position: fixed !important;
            top: 200px !important;
        }
    </style>

Conclusion

I hope you enjoyed learning about positioning the Dialog box to center of page on scrolling in ASP.NET Dialog.

You can refer to our new version of our ASP.NET Web Forms Dialog page to know about its groundbreaking features representations and documentation and how to quickly get started for configuration specifications. You can also explore our ASP.NET Web Forms Dialog example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!