Use Calc() for Window width, height

[Andy]

Would it be possible to set custom width and height using CSS calc()?

The situation is the following: I have a UI which consists of a main area and a sidebar.

When I open the window I want to be able to center the window within the main area, without covering the sidebar. And in my case, the sidebar having 400px, I would like to be able to set the Kendo Window width: calc(100% - 440px) and add a position left of 20px. In this way I would have control on various types of layouts.

Thanks,

Andy

[Dimitar]

Hello Andy,

Setting a width with calc() expression for the Window widget is currently possible through CSS:

<style>
    #window {
        width: calc(500px - 100px);
    }
</style>

Please note that you also have to take the padding of the Window into account when calculating the desired width.

Regards,
Dimitar
Progress Telerik

[Andy]

Hi Dimitar,

Sadly, it doesn't work that way.
The element used to initialize the window component becomes a content within the k-widget component.
Than, there is the inline styling Kendo applies to k-window which needs to be overridden using !important.
The "solution" is to add all this styling to the wrapper on the activate event of the window.

This should be a feature of the window component - to set the size directly on the wrapper using what I've told you.

Best,
Andy

[Dimitar]

Hi Andy,

If the width option of the window is not specified, then the wrapper will not receive an inline width. Thus, this will allow you to specify the desired width through CSS. Here is a Dojo example that demonstrates this:

• https://dojo.telerik.com/EHIPevUs/3

Regards,
Dimitar
Progress Telerik