Maximized window with margins?

7 posts, 0 answers
  1. Nocklas
    Nocklas avatar
    7 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    Hi,

    how can I make a window that fills the whole screen except for a margin of say 50px (I want to make sure the user notices that this is a window and not a new page). It should keep these margins when resizing the browser window.

    Thanks
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Jun 2012 Link to this post

    Hi Niclas,

    The desired behavior can be achieved by modifying the Window source code. You can take a look at the following methods where the Window position and dimensions are set during maximization and browser window resize.

    kendo.window.js

    _onDocumentResize()
    maximize()

    In maximize() the Window top / left position is set to zero / zero, which is the top-left browser viewport point. In _onDocumentResize the Window widht and height are set to be equal to the browser viewport width and height. You can change these values.

    There is a way to achieve the same result without modifying the source, but this will involve changing the Window's position and size after the widget have already done this, which may result in visible flickering.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 04 Sep 2014 Link to this post

    It is been just a little more then 2 years. Is this method still the only one available? Or is there any better approach available.
    Modifying the source code is not the perfect solution since you have problem when updating Telerik controls.

    I also found this, but no response yet.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Sep 2014 Link to this post

    Hello Matjaz,

    The discussed behavior represents a relatively rare use case and it has not enough votes to surpass the priority of other development tasks that our team currently has.

    It is possible to achieve the desired result with custom coding:

    http://jsfiddle.net/dimodi/8jhwwmzt/

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 28 Sep 2015 in reply to Dimo Link to this post

    Here is another Kendo UI user that is looking for a solution for this "rare" use case. I too want users to see that a window is actually a popup window by adding margins. I have been trying my luck by overriding CSS styling but that doesnt work. The calculation of the window when maximized doesn't respect any margins.

     

    I have looked into the proposed custom coding. Unfortunately that is not a workable solution. The "Maximize" action still uses the original function instead of the custom one. Moreover double-clicking the header  triggers the original resize function as well. The "Maximize" and "Restore" action should be visible and I certainly don't want to disable resizing.

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Sep 2015 Link to this post

    Hello Ron,

    I have implemented the desired behavior in another way, which should be closer to your requirements:

    http://jsfiddle.net/dimodi/8jhwwmzt/29/

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 30 Sep 2015 in reply to Dimo Link to this post

    Hi Dimo,

     

    Thanks for this solution. It indeed does the job. You can briefly see the window being resized though. So it's not the ideal solution but for now it will work. Obviously it would be nice to be able to specify margins in a future version of the Kendo Window implementation. Until that time this solution will make do.

     

    Thanks again,

    Ron

Back to Top
Kendo UI is VS 2017 Ready