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

Maximized window with margins?

6 Answers 117 Views
Window
This is a migrated thread and some comments may be shown as answers.
Nocklas
Top achievements
Rank 1
Nocklas asked on 21 Jun 2012, 10:31 AM
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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Jun 2012, 01:53 PM
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!
0
Matjaz
Top achievements
Rank 1
answered on 04 Sep 2014, 11:30 AM
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.
0
Dimo
Telerik team
answered on 09 Sep 2014, 07:19 AM
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!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 28 Sep 2015, 05:19 PM

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.

0
Dimo
Telerik team
answered on 30 Sep 2015, 12:27 PM
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!
0
Ron
Top achievements
Rank 1
Veteran
answered on 30 Sep 2015, 01:00 PM

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

Tags
Window
Asked by
Nocklas
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Matjaz
Top achievements
Rank 1
Ron
Top achievements
Rank 1
Veteran
Share this question
or