Kendo Window Overflow

4 posts, 0 answers
  1. Dominique
    Dominique avatar
    5 posts
    Member since:
    May 2017

    Posted 06 Sep 2017 Link to this post

    I used kendo window with my application and I notice that when I resize the browser to smaller size, kendo window overflows. I have set my kendo window size to 1200. How can I make my kendo window responsive?

     

  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    637 posts

    Posted 08 Sep 2017 Link to this post

    Hi, Dominique.

    You can achieve the request functionality in one of two ways:

    1) either set max width property
    2) add a class name and control it precisely

    I've shown both in this sample dojo -- http://dojo.telerik.com/@joneff/IrAto

    Regards,
    Ivan Zhekov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dominique
    Dominique avatar
    5 posts
    Member since:
    May 2017

    Posted 10 Sep 2017 in reply to Ivan Zhekov Link to this post

    I have already solved this issue by setting the width to percent but I do have another problem, how do I keep the window center every time the browser resizes?
  4. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    637 posts

    Posted 13 Sep 2017 Link to this post

    You can hook to the window resize event and reposition the window every time with the center() method:

    (using my previous example):

    (function() {
      var windowResizeTimeout;
       
      $(window).resize(function() {
        window.clearTimeout(windowResizeTimeout);
        windowResizeTimeout = window.setTimeout(function() {
          maxWidthCss.center();
        }, 100);
      });
    })();

    I've also update my example to include the function -- http://dojo.telerik.com/@joneff/IrAto.

    Note how the window is not immediately re-positioned, but there is a little delay. That's deliberate and the idea is not to perform excess calculations should the window be resized within the next 100 milliseconds ( or 0.1 seconds). You can customize the delay by changing 100 to a more suitable value.

    Regards,
    Ivan Zhekov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top