Need boarder on kendo-window upon out of focus

[Jyothi]

HI,

 

I have a requirement that the kendo-window need to have a solid black border. I can acheive this by setting the following style in css

.hist-window{
    border: 2px solid rgb(44, 11, 192) ;
}

And applying this style to kendo-window. 

<kendo-window #kendoWinfoInstance class="hist-window" title="WorkFlow" *ngIf="opened" (close)="close()"
[width]="850" [minHeight]="450" [resizable]="true"

The problem is, the boarder appears only on focus. I need this border to remain even when the window is out of focus. How can I achieve this?

Regards,

Jyothi

 

 

[Martin]

Hi Jyothi,

Thank you for the provided details.

In general, every Kendo UI for Angular component has default CSS styles applied, which can be overwritten with custom, by using encapsulation property.
Look at the following article for more information:
https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html#view-encapsulation-types

To apply any custom CSS, set encapsulation property to ViewEncapsulation.None.

Check the demo:
https://stackblitz.com/edit/angular-zegd6d?file=app/app.component.ts

I hope this helps. Let me know if any further assistance is required for Kendo UI for Angular.

Regards,
Martin
Progress Telerik

[Jyothi]

Hi Martin,

 

Thanks again for the quick response. I did use the ViewEncapsulation.None. I got around this problem by making the border slightly more pronounced so they can see it even if the window is not in focus.

 

Regards,

Jyothi