Styling modal windows issues

[Sergei]

Hi! I have grid on my page and I'm using pop-up editor with custom template. Here are problems I've got:

1) I have to set window's dimensions in pixels. It's not able to auto-size to fit content

2) I have TabStrip in this window and I have to put it in separate Div and set this div's dimensions. Otherwise TabStrip renders incorrectly. I can't just place TabStrip and tell it "use 100% of width" - it won't. It demands values in pixels.

3) I have child grids in my pop-up editor window. Grid allows to delete records, so I'm using pop-up window to display delete confirmation. I'm using basic template

from Kendo examples. (Look at code at the bottom of my post)

It works, but looks ugly. I need to have proper formatting. For example, properly aligned message, properly styled and aligned buttons (like in grid edit pop-up)

Which k- classes can I use?

Also, close button renders incorrectly. It should be a button with X, but instead it renders "Close" text, which is displayed almost outside the window's borders. And when I click in it, it gives an exception.

Also this window isn't fully modal. I can click on pop-up editor window and it will bring it to front, hiding confirmation window.

<script type="text/x-kendo-template" id="windowTemplate">Delete <strong>#= ProductName #</strong> ? </p>We have #= UnitsInStock # units in stock. </p><button class="k-button" id="yesButton">Yes</button><button class="k-button" id="noButton"> No</button></script>

[Magdalena]

Hello Sergei,

Straight to your questions:

1. Windows inline styles for the width  can be overwritten by the following:
   
   

   .k-window {
       width: auto !important;
   }

2. TabStrip expands to entire width without any additional DOM elements or CSS on our side. Could you please modify this Dojo sample to reproduce the issue? We are sending you this video as a part of the testing where we are increasing width of the Window and the TabStrip expands to the entire width.
3. We have tried to apply the provided template, but it works properly on our side and the "X" button is rendered correctly. We are sending you this Dojo example for your reference.

Regards,
Magdalena
Telerik