[Solved] Cendered modal dialog

[Jozef]

Hi,

I'm referring to older thread: http://www.telerik.com/community/forums/aspnet-mvc/window/open-a-centered-window.aspx. I've updated scripts to version 2011.1.414, and it still doesn't work - if viewable part of window is scrolled down, modal dialog is opened in the middle of the top screen (out of viewable area) and scrolls are locked, so you have to refresh the page. 

Fix recommended in mentioned thread worked. But only for FF, IE and Opera. It doesn't work in Chrome/Safari. And still, I'm wandering, why it is not implemented (fixed) in 1.414? Thank you.

Jozef

edit: the title should be: Centered modal dialog - Chrome/Safari. Could you please fix it, as I don't have rights for it? Thanks.

[Hristo Germanov]

Hello Jozef,

Thank you for contacting us.

In the referred forum thread the problem is different.

The reported issue is unknown for us. Could you tell me how to reproduce it or could you please send us a simple test project which reproduces the depicted issue? Thus I will be able to observe the problem and advice you further.

Greetings,
Hristo Germanov
the Telerik team

[Jozef]

I belive it is similar problem, but ok. Here is my code:

<div style="min-height:2000px"></div>
@Html.Telerik().Window().Name("ModalDown").Modal(true).Visible(false).Content("this is not visible")

<script type="text/javascript">
  setTimeout(function () {
    var modWin = jQuery('#ModalDown').data('tWindow');
    modWin.center().open();
  }, 2000);
</script>

This will give you 2 seconds to scroll down the page, until dialog is opened. In FF and IE (also IE7!) it works fine - dialog is in the middle of visible part of browsed page, but not in Opera, Chrome, Safari - dialog is probably somewhere up in the page, but page remains scrolled down and locked, so you have no other choice than refresh...

I'm attaching current telerik.window.min.js, as I belive we've already changed it to make it work at least in FF and IE (according to referred link). It is from version 2011.1.315. When I used .js file from the newest package, it worked neither in FF nor IE.

[Hristo Germanov]

Hi Jozef,

I have attached  a test project with latest internal build. Can you examine it and tell me it it works for you.
This project is tested in: Chrome(latest), IE, FF, Opera, Safari.

Kind regards,
Hristo Germanov
the Telerik team

[Jozef]

Hello,

Your test project works fine. But only in case I use whole project. When I replaced only telerik.window.min.js, it didn't help - the dialog was not shown at all. When I replaced all telerik's .js files, it showed dialog, but again only on the top of the page.

Can we replace current telerik's libraries, styles and scripts and use your sample as fix? I'm rather careful when using something "beta". 

Thank you,

Jozef

[Hristo Germanov]

Hello Jozef,

I have attached a project with SP 1 of the Telerik Components for ASP.NET MVC and I still can't reproduce the issue. What is different in your case?

All the best,
Hristo Germanov
the Telerik team

[Jozef]

I've updated .js files only. So I'll try to update whole Telerik Componets to version 1.414. Thank you so far for the effort.

Best regards,

Jozef

[Jozef]

Hello,

finally I was able to pinpoint the problem. It is in CSS. We need to use following for body and html elements:

html {
    height:100%;
    overflow: auto;
}

body {
    height: 100%;
    position:relative;
    overflow: auto;
}

But this causes window to be centered incorrectly. If you comment it out, it works - partially. When the window is opened after clicking anchor, the screen is scrolled up. I'm attaching example - there is a link at the bottom of the page. And if you comment out CSS, you can see the second mentioned problem. 

Thank you,

Jozef

[Jozef]

For example jQuery UI's dialog wokrs fine with all these CSS styles. 

Jozef

[Hristo Germanov]

Hi Jozef,

Unfortunately in this case we can offer you only workarounds.
1. You can remove overflow: auto from the body. Then you can move the inner scroll of the page.

body {
    height: 100%;
    position:relative;
}

2. You can set overflow hidden when window is visible and when window is hidden you can set overflow to "". Then you can't move inner scroll of the page and the window will be in the center of the current scroll area.

body {
    height: 100%;
    position:relative;
}

function winMod() {
    var w = jQuery.telerik.window.create({
        title: 'invisible',
        html: 'this is not visible or jumps up.',
        modal: true,
        resizable: true,
        draggable: true,
        width: 550,
        height: 450,
        onClose: onClose
    }).data('tWindow');

    w.center();
    w.open();
    document.documentElement.style.overflow = "hidden";
}

function onClose() {
    document.documentElement.style.overflow = "";
}

I have attached the modified test project.

Greetings,
Hristo Germanov
the Telerik team

[Jozef]

Thank you for suggested workaround... However your attached project doesn't behave correctly when clicked on link - it opens dialog (probably on correct place) but also scrolls up in the same time. So the window is not visible again. 

I did a little altering to your workaround (I left my original CSS with overflow for both body and html):

before opening:

jQuery('html').css('overflow', 'visible');
jQuery('body').css('overflow', 'visible');

after closing:

jQuery('html').css('overflow', 'auto');
jQuery('body').css('overflow', 'auto');

It has only one unloveliness. It scrolls the screen to the top when opening dialog - but then scrolls back to the position where the dialog was opened from (clickable link). But it scrolls back only in Firefox. In IE and Safari it remains at the top of the page.

I think, there must be also possibility of fixing this in window's center function - especially because jQuery UI's dialog doesn't have this kind of problems. But so far, the workaround must be good enough.

Thank you,

Jozef

[Hristo Germanov]

Hi Jozef,

Unfortunately in FF if you change the overflow it will reset the scroll position and there are no workaround for the problem.

We will follow up with a resolution after we deeply investigate the problem with window's center functionality.

Thank you for your feedback - your telerik points have been updated.

Best wishes,
Hristo Germanov
the Telerik team

[Alex Gyoshev]

Hello Jozef,

We addressed the problem and you can find the updated build attached. Thank you for your feedback!

Greetings,
Alex Gyoshev
the Telerik team