[Solved] Window Resize Issue in jQuery

[Wai Kei]

Hi Telerik,

   I have a static Telerik Window (always opened, can be maximized) in which the width will be re-adjusted based in the browser window. E.g. if the user resize the browser window, the telerik window width will also be re-adjusted so that the horizontal scrollbar will not appear.

Html.Telerik().Window()
        .Name("Window")        
        .Title(" ")
        .Draggable(false)
        .Scrollable(true)
        .Modal(false)
        .Content(() =>
            {%>
            <% Html.RenderPartial("~/Views/Shared/Input/ucLetter.ascx", Model); %>
            <%})
        .Buttons(b => b.Maximize())
        .Height(400)
        .ClientEvents(events => events.OnLoad("WindowCoding_OnLoad"))
        .Render(); %>

I have a jQuery event handler to resize the window:

function WindowCoding_OnLoad(e) {
    $(this).width(getWindowWidth());
}

$(window).resize(function() {
    // resize the window based on browser width
    $("#Window").width(getWindowWidth());
});

Everything seems to work fine using this set up until I try to toggle the maximization of the window. As soon as I toggle it once and then I resize it, the outer window frame will be adjusted, but the window content inside stays the same without reducing or increasing the width. This leaves a very strange output in which the window frame is reduced, but all contents are all remained in their position and size.

Please see screenshot. The outer gray frame is the Default telerik window frame (we took out the title). The scrollbar is strangely remained at the original position (guess that's the window content width) although the window size is maximized.

Is there a solution to this?

Thanks

Wai Kei

[Wai Kei]

After a bit more investigation it looks as if the toggle maximization would ignore the resized width. E.g I have a window with original window size (lets say 1400px), I then maximize it (1600px), and then resize it to be smaller (1200px), and then restore, the window size will still become the original window size (1400px, not 1200px) even though I set the window width to be smaller when I restore it. Strange.

[Alex Gyoshev]

Hello Wai Kei,

Instead of setting the window outer wrapper width, you should set the width of the inner element with class "t-window-content":

function WindowCoding_OnLoad(e) {
    $(".t-window-content", this).width(getWindowWidth() - 12);
}

$(window).resize(function() {
    // resize the window based on browser width
    $("#Window .t-window-content").width(getWindowWidth() - 12);
});

The magic number 12 here is the padding of the content element, which should be subtracted from the width due to the nature of the box model.

Greetings,
Alex Gyoshev
the Telerik team

[Wai Kei]

Thanks. That's the solution.