Unable to override progress-bar styles

[RAMAKRISHNAN]

Hi,

I've been trying to override the progress bar style for kendo-stepper. For some reason, i'm getting a scroll bar across the application in the bottom, which follows all the way across the stepper steps. 

From dev tools, i can override this overflow to hidden (Previously it was visible). But when i apply them in my style sheet, it's not getting overridden. Help please.

::ng-deep .k-stepper .k-progressbar {

    pointer-events: none;

    z-index: 0;

    overflow: hidden !important;

}

[Georgi]

Hi Ramakrishnan, 

Thank you very much for the code snippet provided.

Generally speaking, all components in the Kendo UI for Angular library could be further customized by the developers using custom CSS. To do this, the developer can inspect the specific component in the DevTools, identify the exact element that should be modified, and apply the desired custom styling:

Here is a StackBlitz demo that demonstrates a possible approach for modifying the Kendo UI for Angular Stepper:

https://stackblitz.com/edit/angular-hyoeyn

It is important to mention that the encapsulation meta data should be set to ViewEncapsulation.None:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

Please, note that ng-deep has been deprecated by the Angular team:

https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep

In these lines of words, I would also like to mention that the demo aims to point the developer in the right direction but the exact modifications according to the case-specific requirements are considered the developer's effort.

I hope this helps.

Regards,
Georgi
Progress Telerik