How to style a runtime window?

[Stavros]

Hello guys!

I managed to open a runtime window by clicking on a grid row following your suggestions in another post.

I used the following example : https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-content-component

This example is using the following template :

<div class="container-fluid">
      <dl class="row">
        <dt class="col-sm-6">Username:</dt>
        <dd class="col-sm-6">{{ name }}</dd>

        <dt class="col-sm-6">Age:</dt>
        <dd class="col-sm-6">{{ age }}</dd>
      </dl>
    </div>

 

The problem is that whatever styling I tried to style this div (for example I tried to make it a modal window with a gray background for the rest of the app page) it seems to be overwritten by some div.k-content.k-window-content styling rules that I saw in the browser console.

Any ideas on how to properly style these runtime windows?

Thank you very much!

[Preslava]

Hi Stavros,

The Kendo UI for Angular Dialogs package includes two components - Window and Dialog.

The Dialog prompts users to take specific actions by interacting with a modal dialog. It creates a grey overlay over the background content, which restricts any interaction with it.

https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/ 

The Window component displays content in a non-modal HTML window, which can be moved and resized.

https://www.telerik.com/kendo-angular-ui/components/dialogs/window/ 

From the provided details I was not able to understand what the issue is. If further assistance is needed, please share additional information about the desired behavior and an example where the issue can be reproduced.

I hope this helps. Let me know, should there be further questions.

Regards,
Preslava
Progress Telerik