Control the size of windows

4 posts, 1 answers
  1. Johannes
    Johannes avatar
    9 posts
    Member since:
    Feb 2017

    Posted 30 Jul Link to this post

    I am trying to control the size of my windows. On my development environment, I have quite a large screen, so when the window opens, it never has an issue with automatically sizing the window. However, with other people's screens, the ajax loaded content can make the window resize so that it is outside of the viewport. I want to make sure that this never happens. Here is the angle that I have taken to make this work... unsuccessfully:

    I create the window with maxHeight: 80% and add the onWindowMaximize function to the maximize event.

     

    function onWindowMaximize(e) {
        var window = $("#" + e.sender.wrapper.context.id).data("kendoWindow");//get window
        //restore to original size
        window.restore();
        window.unbind('maximize', onWindowMaximize)//unbind this method from maximise event
        window.setOptions({
            position:{
                top: window.wrapper.offset().top,
                left: window.wrapper.offset().left,
            },
            height: window.wrapper.height(),
            maxHeight: '100%'
        });
        window.maximize();//maximize window
    }

     

    The problem with this solution is that when I "restore" the window, it keeps the same width, but the height turns to 100px. I am happy to look into other options, but I really need to make sure that when they window loads, it is no more than 80% of the screen.

  2. Answer
    Vessy
    Admin
    Vessy avatar
    1848 posts

    Posted 31 Jul Link to this post

    Hi Johannes,

    The maxHeight property accepts only integer values in pixels, this is why it defaults to 100px when a percent value is passed. In order to set max height depending on the window's wrapper size, you will need to calculate it manually  in pixels before setting it to the widget;
    function onWindowMaximize(e) {
        var window = $("#" + e.sender.wrapper.context.id).data("kendoWindow");//get window
        //restore to original size
        window.restore();
        window.unbind('maximize', onWindowMaximize)//unbind this method from maximise event
        window.setOptions({
            position:{
                top: window.wrapper.offset().top,
                left: window.wrapper.offset().left,
            },
            height: window.wrapper.height(),
            maxHeight:  0.8 * $(window).height(); //e.g.
        });
        window.maximize(); //maximize window
    }


    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Johannes
    Johannes avatar
    9 posts
    Member since:
    Feb 2017

    Posted 31 Jul in reply to Vessy Link to this post

    Thanks Vessy!

    Had to make a small change as I had my Kendo Window as "window" and I wanted the maxHeight to be the width of the entire viewport.

    but after that, works a treat!

  4. Vessy
    Admin
    Vessy avatar
    1848 posts

    Posted 01 Aug Link to this post

    Hi,

    You are welcome, Johannes - I am glad my suggestion helped you to achieve the target result.

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top