This is a migrated thread and some comments may be shown as answers.

Vertical Centering

13 Answers 218 Views
Window
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Derek Hunziker
Top achievements
Rank 1
Derek Hunziker asked on 26 Aug 2010, 07:34 PM
Hello,

Some of my pages run pretty long and on those pages, my modals always appear off-screen at the top of the page.

I was able to get it centered by adding the document window's "scrollTop" amount to the css "top" position of my modal. Shouldn't this be the default behavior?

$('#opener-element').click(function (e) {
    var win = $('#MyWindow');
    win.data('tWindow').open();
    win.css('top', win.offset().top + $(window).scrollTop() + 'px');
    e.preventDefault();
});

13 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 27 Aug 2010, 01:49 PM
Hello Derek,

It isn't necessary for modal windows to be always centered -- for example, the grid editing in popup mode positions the window over the grid rather than at the center of the page.

There is the handy client-side center() method that centers the window in situations like yours, through      win.data('tWindow').center().open();

We did have the same problem with it, though - it didn't take into account the scroll offset. This has been fixed.

Sincerely yours,
Alex Gyoshev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Andrej Kaurin
Top achievements
Rank 1
answered on 29 Sep 2010, 10:33 PM
This doesn't work for me if I have scrolling. It centers window regarding to top of the page but ignores vertical scroll.
I am using 2010.2.825 version.
0
Atanas Korchev
Telerik team
answered on 30 Sep 2010, 07:06 AM
Hi kaan,

 This is the "by design" behavior. The window is centered with regard to the visible area not the total height of the page.

Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Andrej Kaurin
Top achievements
Rank 1
answered on 30 Sep 2010, 08:27 AM
I have scroll on the page and button that calls window open is visible when I scroll down to the end but after I scroll down and click to button window is open at the top of the page so it is not in the visible area.
0
Atanas Korchev
Telerik team
answered on 30 Sep 2010, 11:11 AM
Hello kaan,

 I see what you mean and indeed this behavior is not pleasant. We will investigate it further and post here when a workaround or fix is available.

All the best,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Alex Gyoshev
Telerik team
answered on 30 Sep 2010, 04:29 PM
Hello Andrej,

We just fixed the problem. You can patch it in your code by changing the center() method of the window (in the telerik.window.js file) to:

    center: function () {
        var $element = $(this.element);
        var $window = $(window);

        $element.css({
            left: $window.scrollLeft() + ($window.width() - $element.width()) / 2,
            top: $window.scrollTop() + ($window.height() - $element.height()) / 2
        });

        return this;
    }


Regards,
Alex Gyoshev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Andrej Kaurin
Top achievements
Rank 1
answered on 30 Sep 2010, 04:38 PM
It works great now. Bravo! I attached updated JS file in this reply.
0
Derek Hunziker
Top achievements
Rank 1
answered on 15 Oct 2010, 07:02 PM
Strange, that fix doesn't produce the expected results for me. The window still appears off-screen at the top of the page. This seems to work for me though:

top:(f.scrollTop()+e.offset().top+f.height()-e.height())/2
0
Alex Gyoshev
Telerik team
answered on 18 Oct 2010, 01:50 PM
Hello Derek,

Under what browser? Is this consistent under IE/FF/Chrome?

All the best,
Alex Gyoshev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Eugene
Top achievements
Rank 1
answered on 01 Nov 2010, 10:08 AM
Hello Alex,
Wrong behavior in all browsers.
You stated in your message that fix would be as following:
"top: $window.scrollTop() + ($window.height() - $element.height()) / 2".
However, what I see in telerik.window.min.js:
"top:(f.scrollTop()+f.height()-e.height())/2".
Here f.scrollTop() is inside parentheses, where it should not be.
Regards,
Eugene.
0
Alex Gyoshev
Telerik team
answered on 01 Nov 2010, 10:55 AM
Hi Eugene,

Indeed, the fix has the scrollTop / scrollLeft outside the parenthesis -- you can see that in the script from the beta. The behavior before that included it in the parenthesis -- this was the reason it didn't work.

Best wishes,
Alex Gyoshev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Wai Kei
Top achievements
Rank 1
answered on 30 Dec 2010, 02:55 PM
I have the 2010.Q3 build and it has a very strange behavior. Like some of the members here I have a really long page with browser scrolling on the right. When the user scroll down to the very bottom part of the page and click on a button to open a telelrik modal window, the window would open at the bottom (relative to the window position in where it is opened, which is fine). However, the browser window scrollbar will be "reset" and jump back to the top of the page. Thus, I have an awkaward situation in which when the user clicks on a button at the bottom of the page with scrolling, the modal window will open properly at the relative window position (i.e. at the bottom) but the browser scrollbar is always reset and jumps back to the top of the window. Then everytime I have to scroll all the way to the bottom to find the modal window.

Is it a known issue or am I doing something wrong?

thank you.
0
Alex Gyoshev
Telerik team
answered on 30 Dec 2010, 03:13 PM
Hello Wai Kei,

Perhaps you have to attach a JavaScript handler that prevents the navigation within the page (using e.preventDefault() ). If that is not the case, please provide more details (preferably a sample project that shows the issue) in another thread.

Kind regards,
Alex Gyoshev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Window
Asked by
Derek Hunziker
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Andrej Kaurin
Top achievements
Rank 1
Atanas Korchev
Telerik team
Derek Hunziker
Top achievements
Rank 1
Eugene
Top achievements
Rank 1
Wai Kei
Top achievements
Rank 1
Share this question
or