Maximized window with margins?

[Nocklas]

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

[Dimo]

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

[Matjaz]

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.

[Dimo]

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

 

 

[Inception]

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.

[Dimo]

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

[Inception]

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