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

Kendo Window Overflow

3 Answers 353 Views
Window
This is a migrated thread and some comments may be shown as answers.
Dominique
Top achievements
Rank 1
Dominique asked on 07 Sep 2017, 12:49 AM

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?

 

3 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 08 Sep 2017, 03:35 PM
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.
0
Dominique
Top achievements
Rank 1
answered on 10 Sep 2017, 05:27 AM
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?
0
Ivan Zhekov
Telerik team
answered on 13 Sep 2017, 07:35 AM
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.
Tags
Window
Asked by
Dominique
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Dominique
Top achievements
Rank 1
Share this question
or