Strange behaviour when using style for position

4 posts, 0 answers
  1. David Penny
    David Penny avatar
    174 posts
    Member since:
    Jun 2006

    Posted 14 May 2013 Link to this post

    Hi,

    I have added the following style information to several of my pages where a RadGrid calls an update form using a RadWindow. This was added following recommendations here because the RadWindow would open almost of the page when the grid was scrolled down.

    <style type="text/css">
            .RadWindow
            {
                top: 0px !important;
                left: 0px !important;
            }
        </style>

    Since upgrading to the 2013 Q1 release (and later) this style entry now makes the Radwindow, when closed, to display as small in the top corner of the calling page as modal and it cannot be closed - the entire web page has to be closed.

    If I remove the style then the RadWindow works as expected, but the position can then be wrong in certain browsers.

    David Penny
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 May 2013 Link to this post

    Hi David,

    Could you link me to the resource that advised on using such styles, as it may have been a recommendation for a very peculiar scenario? Generally, such rules should not be used as they can interfere with the overall positioning logic of the control.

    If you are having issues with the popup position it is better if they are addressed at their source instead of patched with CSS overrides. What I can suggest in this regard is the following, condensed from common issues people have had
    - if you are using anchors to open the popups make sure their href attribute is set to javascript:void(0); and not to a # sign so that they do not scroll the page. Cancelling the default browser action by returning false can also work to prevent the scrolling they will do
    - try using the OnClientShow event of the control to call its center() method, e.g. function OnClientShowHandler(s) { s.center(); }
    - make sure there aren't any controls that receive focus on the server, as they can also scroll the page, both in the RadWindow or on the calling page


    Greetings,
    Marin Bratanov
    the Telerik team
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David Penny
    David Penny avatar
    174 posts
    Member since:
    Jun 2006

    Posted 15 May 2013 Link to this post

    Hi Marin,

    The CSS originally came from this thread:

    http://www.telerik.com/community/forums/aspnet-ajax/scheduler/radwindow-opened-from-scheduler-not-correctly-positioned.aspx

    As I said, I have had to remove the CSS as it was causing other problems since 2013 Q1. But the original problem has then started happening again where the Browse window is scrolled down below the first page entries and a window is opened.

    David
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 17 May 2013 Link to this post

    Hi David,

    I tried to reproduce this problem and I was not able to. I am attaching the page I tested with, if you can modify it to mimic your scenario and show the problem I will do my best to help  resolve the case. I used this demo as base.

    In the meantime I can suggest a few things you can try:
    1) add a timeout when you open the RadWindow and when you maximize it
    var ow = window.radopen("EditEvent.aspx?Mode=Insert&Start=" + start + "&IsAllDay=" + isAllDay, "AdvancedForm");
    setTimeout(function ()
    {
        ow.maximize();
    }, 0);

    you can also try increasing this timeout to see if this will help


    2) see if there is a server request despite of the eventArgs.set_cancel(true); call, some of the other methods that are called can be causing this. In that case it is possible that the page scrolls to the top because of the postback. What you can do in this case is to use the pageRequestManager endRequest event to catch this moment, get a referecnce to that window and restrore, then maximize, e.g.:
    function endRequestHandler()
    {
        var wnd = GetRadWindowManager().getWindowByName("AdvancedForm");
        if(wnd && wnd.isMaximized()){
            wnd.restore();
            setTimeout(function ()
            {
                wnd.maximize();
            }, 0);
        }
    }
    Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(endRequestHandler);
    where the timeout may not be necessary or may need to be increased.


    3) look for code that sets focus somewhere on the page - either with JavaScript, or with the server Focus() method. This can also cause the browser to scroll to the top. If there is such code it should be removed, a modal popup conflicts with the concept of the page behind having focus.

    Regards,
    Marin Bratanov
    the Telerik team
    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 their blog feed now.
Back to Top