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

Use Calc() for Window width, height

3 Answers 74 Views
Window
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 04 Mar 2020, 02:48 PM

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

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 06 Mar 2020, 01:56 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Andy
Top achievements
Rank 1
answered on 09 Mar 2020, 11:23 AM

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

0
Dimitar
Telerik team
answered on 11 Mar 2020, 06:48 AM

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:

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
Andy
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Andy
Top achievements
Rank 1
Share this question
or