We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to position the Dialog box to center of page on scrolling?

Platform: ASP.NET MVC |
Control: Dialog |
Published Date: July 29, 2016 |
Last Revised Date: May 8, 2019
Tags: dialog

Description

 Open a dialog on the center of the screen and maintain the center positioning on scrolling the page that have large content.

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>

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon