RadWindow Overlay Manipulation (or issue)

2 posts, 0 answers
  1. Craig
    Craig avatar
    14 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2013 Link to this post

    Hi,
    I have a RadWindow which opens with Modal=true in the centre of my screen.  An overlay accompanies the modal window just before the closing form tag as usual...

    The problem is... when I resize my browser, the overlay is happy to increase in size... but when I resize the browser back to the original position I am shown scrollbars.  It seems that the overlay is capable of increasing in size dynamically, but not decreasing dynamically.

    I'm not sure if this is a bug... I cannot think of a reason why growth would be needed but not vice versa...

    Does anyone know how I can manipulate this overlay?  The increase in height and width of the overlay must be set using some Telerik javascript.  I have tried accessing this DOM element and setting the height and width through JQuery, but I cannot seem to get access to the div overlay itself (in the resize browser event) although I can access this using exactly the same syntax in Chrome console after the page has fully loaded! (Could this be because I am attempting to manipulate a div via JQuery with an attribute of unselectable="on" ?)

    Can anyone help me to resize the overlay when reducing the size of the window please?

    Kind Regards

    Craig
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 01 Nov 2013 Link to this post

    Hello Craig,

    You are correct, the modal overlay of the window extends the body element. This is why the scrollbars appear after window resizing.

    You could try if the following example setup adjusts the behavior to your expectations:
    <telerik:RadWindow runat="server" ID="RadWindow1"
        VisibleOnPageLoad="true" Modal="true">
        <ContentTemplate>
            <h1>Some content</h1>
        </ContentTemplate>
    </telerik:RadWindow>
     
    <script type="text/javascript">
        Sys.Application.add_load(function () {
            var windowControl =$find("<%= RadWindow1.ClientID %>");
     
            $telerik.addExternalHandler(window, "resize", function (e) {
                windowControl.center();
                windowControl.set_modal(false);
                windowControl.set_modal(true);
            });
        });
    </script>


    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top